CSS-Selektoren – Teil 4

Weitere Selektoren

Ich habe mich entschieden, doch noch weiter auf die Selektoren einzugehen und stelle dir im Folgenden die restlichen CSS-Selektoren vor. Du wirst viele davon sehr selten verwenden aber ich denke, es ist gut, dass du sie einmal gesehen hast.

Ebenfalls habe ich ein Cheatsheet, also eine Art Spickzettel, erstellt, den du als Nachschlagewerk nutzen kannst, wenn du bei deiner Arbeit an einer Website, nicht sicher bist, wie du ein Element am besten ansprichst. Das Cheatsheet verlink ich, wie gewohnt in der Infobox.

Erstes-Kind-Selektor

Wenn du eine Reihe von HTML-Elementen in einem Eltern-Element hast und nur das erste Kind ansprechen willst, so kannst du dies mit dem :first-child Selektor tun.

Dieser Selektor wählt ein bestimmtes HTML-Element aus, wenn es das erste Kind ist und verändert nur dieses erste Kind.

In diesem Beispiel sprechen wir im CSS mit dem p:first-child Selektor das p-Tag an, wenn das p-Tag das erste Kind-Element ist.
Im zweiten Code-Block ist das p-Tag zwar Kind-Element des div-Tags, allerdings ist das p-Tag nicht das erste Kind. Somit greift die Stilanweisung in diesem zweiten Code-Block nicht.
Im ersten Code-Block greift die Stilanweisung, denn das p-Tag ist das erste Kind-Element.

Letztes-Kind-Selektor

Wenn du eine Reihe von HTML-Elementen in einem Eltern-Element hast und nur das letzte Kind ansprechen willst, so kannst du dies mit dem :last-child Selektor tun.

Dieser Selektor wählt ein bestimmtes HTML-Element aus, wenn es das letzte Kind ist und verändert nur dieses letzte Kind.

In diesem Beispiel sprechen wir im CSS mit dem p:last-child Selektor das p-Tag an, wenn das p-Tag das letzte Kind-Element ist.
Im zweiten Code-Block ist das p-Tag zwar Kind-Element des div-Tags, allerdings ist das p-Tag nicht das letzte Kind. Somit greift die Stilanweisung in diesem zweiten Code-Block nicht.
Im ersten Code-Block greift die Stilanweisung, denn das p-Tag ist das letzte Kind-Element.

Einzige-Kind-Selektor

Mit dem Selektor :only-child sprichst du ein HTML-Element an, dass das einzige Kind eines Eltern-Elements ist.

In diesem Code-Beispiel sprechen wir per div:only-child nur das div-Tag an, wenn es das einzige Kind ist. Daher greift die Stilanweisung für den zweiten Code-Block nicht, denn hier befinden sich mehrere Kind-Divs im Eltern-Element.

Wiederholungs-Selektoren

Mit den Wiederholungs-Selektoren sprichst du HTML-Elemente anhand ihrer Reihenfolge an. Befinden sich mehrere Kind-Elemente in einem Eltern-Element, kannst du also die Kind-Elemente mit dem :nth-child() Selektor anhand ihrer Reihenfolge ansprechen.

:nth-child()

Dabei schreibst du in die runden Klammern jedes wievielte Elemente du ansprechen willst, gefolgt von einem n. Klingt kompliziert, ist aber total einfach.

Willst du also jedes zweite p-Tag ansprechen, tust du dies mit dem Selektor p:nth-child(2n). Jedes ungerade p-Tag sprichst du dementsprechend mit p:nth-child(1n) an.

Willst du gerade und ungerade Elemente ansprechen, kannst du dies auch mit dem englischen Wort für gerade (even) oder ungerade (odd) tun. Also p:nth-child(odd) oder p:nth-child(even).

Hier einmal ein Beispiel in dem wir jedes ungerade Element mit p:nth-child(odd) im Aussehen verändern.

div :nth-child()

Wir haben also im vorherigen Beispiel festgelegt jedes Zweite tr-Tag anzusprechen. Dies haben wir erreicht durch den Selektor tr:nth-child(odd).

Wir können denselben Effekt auch anders schreiben, in dem wir Bezug auf das Eltern-Element nehmen. Die Schreibweise ist dann Eltern-Element, Leerzeichen, Wiederholungs-Selektor, also div :nth-child(odd). Das Leerzeichen macht hier also den Unterschied.

In diesem Beispiel sprechen wir also jedes gerade p-Tag in dem Eltern-Div an.

Es gibt noch spezielle Arten der Selektierung in Hinsicht auf die Wiederholung, wie zum Beispiel :nth-last-child(7) oder :nth-last-child(3n+4) aber ich glaube, du verstehst, wie das ganze funktioniert und kannst, für weitere Beispiele und Varianten immer auf das Cheatsheet zurückgreifen.

Typen-Wiederholungs-Selektoren

Du kannst auch das erste, letzte oder einzige Kind-Element eines bestimmten HTML-Element-Typs gezielt ansprechen, mit den Selektoren :first-of-type, :last-of-type und :only-of-type, wie du hier im Code-Beispiel siehst.

So, nun kennst du wirklich fast alle Arten der Selektion. Wenn du noch tiefer einsteigen willst, empfehle ich dir das Cheatsheet anzusehen.

Ich denke aber, es macht am meisten Sinn, wenn du das Cheatsheet in der Praxis als Nachschlagewerk verwendest und grob weißt, das es diese sehr speziellen Arten der Selektion gibt. Auswendiglernen musst du als Programmierer wirklich nichts. Nachschlagen und Recherchieren gehört fest in den Arbeitsablauf. Wichtig ist, dass du das Prinzip verstehst und dann weißt, wo du die Details nachschlagen kannst.

P.S. Wenn dir der Artikel gefallen hat, abonniere doch die wöchentlichen Tutorials auf YouTube, den E-Mail-Newsletter oder Beteilige dich an der Diskussion auf Facebook.