Winnfried: Gezielt nach CSS-"Dingen" suchen

Hallo, immer wieder stoße ich auf CSS-Konstrukte, deren Bedeutung ich lernen möchte. Als Beispiele "div > a" oder "...:..." Wenn ich nun suche CSS and > (oder :) so finde ich nichts. Wo gibt es ein Dokument, in dem ich nach diesen Konstrukten suchen kann - möglichst in deutsch?

Folgende Nachrichten verweisen auf diesen Beitrag:

  1. Herzlich willkommen bei SELFHTML!!

    Hallo, immer wieder stoße ich auf CSS-Konstrukte, deren Bedeutung ich lernen möchte. Als Beispiele "div > a" oder "...:..." Wenn ich nun suche CSS and > (oder :) so finde ich nichts.

    Das sind Selektoren

    Hier der Kindselektor >

    Wo gibt es ein Dokument, in dem ich nach diesen Konstrukten suchen kann - möglichst in deutsch?

    In unserem Wiki - siehe die oben genannten Links!

    Herzliche Grüße

    Matthias Scharwies

    -- Es gibt viel zu tun: ToDo-Liste
  2. Hallo

    Hallo, immer wieder stoße ich auf CSS-Konstrukte, deren Bedeutung ich lernen möchte. Als Beispiele "div > a" oder "...:..." Wenn ich nun suche CSS and > (oder :) so finde ich nichts. Wo gibt es ein Dokument, in dem ich nach diesen Konstrukten suchen kann - möglichst in deutsch?

    Öhhm? Du weißt, wo du diese Frage stellst? SelfHTML hat natürlich auch eine CSS-Sektion. Bei deinem Beispiel div > a handelt es sich um einen Selektor, speziell um den Kindselektor.

    Tschö, Auge

    -- Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
    Kleine freie Männer von Terry Pratchett
    1. @Auge und Matthias, als Laie, der ein CSS sieht und es verstehen will, ohne sich zunächst in die Begriffe Selektor u.a. einarbeiten zu müssen, sind Eure Verweise ungeeignet. DEnn um das > zu finden, muss ich ja wissen, was es ist.

      Öhhm? Du weißt, wo du diese Frage stellst? SelfHTML hat natürlich auch eine CSS-Sektion.

      Wenn ich auf dieser Seite nach > oder : suche finde ich nichts.

      1. Servus!

        @Auge und Matthias, als Laie, der ein CSS sieht und es verstehen will, ohne sich zunächst in die Begriffe Selektor u.a. einarbeiten zu müssen, sind Eure Verweise ungeeignet. DEnn um das > zu finden, muss ich ja wissen, was es ist.

        Öhhm? Du weißt, wo du diese Frage stellst? SelfHTML hat natürlich auch eine CSS-Sektion.

        Wenn ich auf dieser Seite nach > oder : suche finde ich nichts.

        Das kann ich mir nur schwer vorstellen. Auf der hier verlinkten Seite:

        Hier der Kindselektor >

        steht in der 1. Zeile: "Werden zwei einfache Selektoren durch die schließende spitze Klammer („>“) miteinander verbunden ..."

        Danach habe ich dir folgende Tutorials empfohlen, in denen Du schrittweise in die Materie eingeführt wirst:

        Teil 2 des CSS-Tutorials:

        Ich glaube wirklich, dass sie dir einen Überblick verschaffen können.

        Wenn ich auf dieser Seite nach [...] : suche finde ich nichts.

        Da kann ich nur raten, dass Du evtl. die Pseudoklassen meinst wie z.B a:hoveroder Pseudoelemente wie p::before

        Das wäre auf der oben verlinkten Seite: CSS/Selektoren die rechte Spalte.

        Herzliche Grüße

        Matthias Scharwies

        -- Es gibt viel zu tun: ToDo-Liste
        1. Öhhm? Du weißt, wo du diese Frage stellst? SelfHTML hat natürlich auch eine CSS-Sektion.

          Wenn ich auf dieser Seite nach > oder : suche finde ich nichts.

          Das kann ich mir nur schwer vorstellen. Auf der hier verlinkten Seite:

          Hier der Kindselektor >

          steht in der 1. Zeile: "Werden zwei einfache Selektoren durch die schließende spitze Klammer („>“) miteinander verbunden ..."

          Was ich bereits schrieb: Man muss wissen, dass es ein Selektor ist, und sich entsprechend durchhangeln.

        2. Hallo,

          steht in der 1. Zeile: "Werden zwei einfache Selektoren durch die schließende spitze Klammer („>“) miteinander verbunden ..."

          Warum eigentlich „schließende Klammer“ und nicht „Größer-Als-Zeichen“?

          Gruß
          Kalk

          1. Servus!

            Hallo,

            steht in der 1. Zeile: "Werden zwei einfache Selektoren durch die schließende spitze Klammer („>“) miteinander verbunden ..."

            Warum eigentlich „schließende Klammer“ und nicht „Größer-Als-Zeichen“?

            Guter Punkt! gleich geändert!

            Gruß
            Kalk

            Herzliche Grüße

            Matthias Scharwies

            -- Es gibt viel zu tun: ToDo-Liste
          2. Hallo Tabellenkalk,

            steht in der 1. Zeile: "Werden zwei einfache Selektoren durch die schließende spitze Klammer („>“) miteinander verbunden ..."

            Warum eigentlich „schließende Klammer“ und nicht „Größer-Als-Zeichen“?

            Auch wenn jeder weiß, was gemeint ist, hast du natürlich recht. Spitze Klammern wären Unicode: U+27E8 und U+27E9. Aber es ist ein Wiki und du weißt ja, was es bedeutet Vorschläge zu machen? 😉

            Gruss
            Henry

      2. Hallo

        als Laie, der ein CSS sieht und es verstehen will, ohne sich zunächst in die Begriffe Selektor u.a. einarbeiten zu müssen, sind Eure Verweise ungeeignet.

        Wie bitte? Unsere Verweise führen dorthin, wo du dich über das fragliche Thema inklusive der Fachbegriffe informieren kannst. Spätestens mit den Fahcbegriffen steht dir die Welt der relevanten Suchergebnisse in der Suchmaschine deiner Wahl offen.

        DEnn um das > zu finden, muss ich ja wissen, was es ist.

        Wenn du nicht weißt, worum es sich dabei handelt, nicht. Das ist klar. Mit unseren Links kannst du aber ermitteln, worum es sich handelt. Dieses neue Wissen anzuwenden, ist dann deins.

        Öhhm? Du weißt, wo du diese Frage stellst? SelfHTML hat natürlich auch eine CSS-Sektion.

        Wenn ich auf dieser Seite nach > oder : suche finde ich nichts.

        Lesen musst du schon, wohl auch mehr als nur ein paar Absätze. Bezüglich „>“ und „:“ haben wir dir die Seite zur Übersicht der Selektoren verlinkt, wo du „>“ und „:“ tatsächlich finden kannst.

        Tschö, Auge

        -- Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
        Kleine freie Männer von Terry Pratchett
        1. Wenn du nicht weißt, worum es sich dabei handelt, nicht. Das ist klar. Mit unseren Links kannst du aber ermitteln, worum es sich handelt. Dieses neue Wissen anzuwenden, ist dann deins.

          Eben, das ist klar. Aber jetzt kommt ein ~ oder :: oder irgend etwas anderes. Dann muss ich wieder erst nachfragen, um was es sich handelt. Ich stelle mir eine Übersicht vor, in der alle Selektoren, Pseuudoelemente (habe ich gerade gelesen) vorkommen. Am besten in Tabellenform (3 Spalten), so dass man sogar sortieren könnte nach Art oder Symbol.

          Symbol Art Beschreibung
          ">" Selector Beispiel: a > b, B Kind von a
          " " Selector Beispiel: a b, B Kind/Enkel,... von a
          "::....." Pseudoel. Beispiel ::first-line, ......

          Also nicht "wissen um was es sich bei :: handelt und dann gezielt suchen" sondern "suchen um was es sich bei :: handelt".


          [edit]@Auge habe das Beispiel zur Tabelle umgebaut, schien ursprünglich so gewollt zu sein[/edit]

          1. Servus!

            Ich stelle mir eine Übersicht vor, in der alle Selektoren, Pseudoelemente ... vorkommen. Am besten in Tabellenform:

            Symbol Art Beschreibung
            " " Nachfahrenselektor Beispiel: a b, B Kind/Enkel,... von a
            ">" Kindselektor Beispiel: a > b, B Kind von a
            "::" Pseudoel. Beispiel ::first-line, ......

            Also nicht "wissen um was es sich bei :: handelt und dann gezielt suchen" sondern "suchen um was es sich bei :: handelt".

            Ok, verstanden!

            Wahrscheinlich scheitert das aber daran, dass man einerseits diese Kombinatoren >,~,=,^=v,a$= hat, andererseits mit den .,# eigene Bezeichner angibt, dies alles mit Typselektoren oder (Elementname) oder eben Klassenselektoren keine saubere Einteilung treffen kann.

            Ja, ich weiß, dass sieht jetzt alles schwierig aus, aber ich glaub die dreispaltige Liste mit Namen und BeispielSelektoren auf der Portalseite CSS/Selektoren ist letztlich doch übersichtlicher.

            @Matthias Apsel Wäre eine solche Tabelle sinnvoll? Wenn ja, wo könnte man sie anlegen?

            Herzliche Grüße

            Matthias Scharwies

            -- Es gibt viel zu tun: ToDo-Liste
            1. Servus!

              Ich glaub', so'ne Tabelle scheitert daran, dass man einfach immer Beispiele und nicht nur die „Symbole“ braucht.

              Auch im Englischen gibt's nur Übersichten, keine Tabellen.

              Herzliche Grüße

              Matthias Scharwies

              -- Es gibt viel zu tun: ToDo-Liste
              1. Servus!

                Ich glaub', so'ne Tabelle scheitert daran, dass man einfach immer Beispiele und nicht nur die „Symbole“ braucht.

                Ja, da gebe ich Dir Recht. Alternative: Statt der Beschreibung Link zum entsprechenden Kapitel im wiki.selfhtml.org

                Aber auch Dein Vorschlag "Der CSS-Schnellindex ist eine gute Anlaufstelle." hilft mir vorerst weiter (bis die oben zitierte "eierlegende Wollmichsau/Tabelle" realisiert ist 😉

                1. Servus!

                  Servus!

                  Ich glaub', so'ne Tabelle scheitert daran, dass man einfach immer Beispiele und nicht nur die „Symbole“ braucht.

                  Ja, da gebe ich Dir Recht. Alternative: Statt der Beschreibung Link zum entsprechenden Kapitel im wiki.selfhtml.org

                  Aber auch Dein Vorschlag "Der CSS-Schnellindex ist eine gute Anlaufstelle." hilft mir vorerst weiter

                  Aber hier Schnell-Index/CSS und hier CSS/Selektoren ist doch alles auf Beschreibungsseiten mit Live-Beispielen verlinkt. Es ist halt nur nicht so übersichtlich (dafür aber ausführlicher) als eine Tabelle.

                  (bis die oben zitierte "eierlegende Wollmichsau/Tabelle" realisiert ist 😉

                  Wir arbeiten dran!

                  Herzliche Grüße

                  Matthias Scharwies

                  -- Es gibt viel zu tun: ToDo-Liste
                  1. Hallo Matthias Scharwies,

                    (bis die oben zitierte "eierlegende Wollmichsau/Tabelle" realisiert ist 😉

                    Wir arbeiten dran!

                    Nö. Daran sollten wir nicht arbeiten.

                    Bis demnächst
                    Matthias

                    -- Rosen sind rot.
            2. Hallo Matthias Scharwies,

              @Matthias Apsel Wäre eine solche Tabelle sinnvoll?

              Ich denke nicht. Es gibt https://de.wikipedia.org/wiki/Cascading_Style_Sheets#Selektoren. Und wir wollen ja vor allem die Anwendung zeigen.

              Bis demnächst
              Matthias

              -- Rosen sind rot.
          2. Hallo Winnfried,

            Eben, das ist klar. Aber jetzt kommt ein ~ oder :: oder irgend etwas anderes. Dann muss ich wieder erst nachfragen, um was es sich handelt.

            Oder ein wenig in den dir schon gegebenen Quellen umherstöbern.

            Also nicht "wissen um was es sich bei :: handelt und dann gezielt suchen" sondern "suchen um was es sich bei :: handelt".

            Der CSS-Schnellindex ist eine gute Anlaufstelle.

            Bis demnächst
            Matthias

            -- Rosen sind rot.
            1. Servus!

              Der CSS-Schnellindex ist eine gute Anlaufstelle.

              Gute Idee! Die Symbole .,#, und > könnte man ja vor der Überschrift : notieren.

              Bis demnächst
              Matthias

              Herzliche Grüße

              Matthias Scharwies

              -- Es gibt viel zu tun: ToDo-Liste
              1. Hallo Matthias,

                wird der Schnellindex manuell gepflegt?

                Rolf

                -- sumpsi - posui - clusi
                1. Servus!

                  Hallo Matthias,

                  wird der Schnellindex manuell gepflegt?

                  Ja, bin grad drüber!

                  Der Schnellindex verwendet ja die Mehrspaltenvorlage, innerhalb der wie in allen anderen Vorlagen auch, die Sonderzeichen escaped werden müssen (→ Schweinearbeit)! 😟

                  Ich hatte noch überlegt, Weiterleitungen einzurichten, aber eine Wiki-Seite darf halt nicht mit einem Sonderzeichen beginnen.

                  Herzliche Grüße

                  Matthias Scharwies

                  -- Es gibt viel zu tun: ToDo-Liste
                  1. Hallo Matthias,

                    danke. Ich bin bei der Gelegenheit auf @support im Schnellindex gestoßen, habe mich gewundert, dann in @supports korrigiert und gleich auch CSS.supports() und CSS.escape() dokumentiert 😀. Im Übrigen siehe "Letzte Änderungen im Wiki".

                    Rolf

                    -- sumpsi - posui - clusi
                    1. Servus!

                      Hallo Matthias,

                      danke. Ich bin bei der Gelegenheit auf @support im Schnellindex gestoßen, habe mich gewundert, dann in @supports korrigiert und gleich auch CSS.supports() und CSS.escape() dokumentiert 😀. Im Übrigen siehe "Letzte Änderungen im Wiki".

                      Danke!

                      Rolf

                      Herzliche Grüße

                      Matthias Scharwies

                      -- Es gibt viel zu tun: ToDo-Liste
  3. Servus!

    Grad noch gefunden:

    Teil 2 des CSS-Tutorials:

    Herzliche Grüße

    Matthias Scharwies

    -- Es gibt viel zu tun: ToDo-Liste