Die allermeisten Webentwickler durften die Pseudoklasse :first-child
kennen. Damit kann man innerhalb eines Elternelements das erste genannte Element ansprechen. Mit #inhalt p:first-child
würde man die ersten Absätze von #inhalt
und seinen Kind-Elementen ansprechen.
So weit so gut. Was mache ich aber, wenn ich nicht das erste bestimmte Element ansprechen möchte, sondern das erste Element mit einem bestimmten Klassenwert. Hier bietet sich dann die Pseudoklasse :first-of-type
zum Einsatz an.
Lange Rede, kurzer Sinn … oder ein Code-Beispiel sagt mehr als 1.00 Worte. 🙂 Im folgenden kleinen Beispiel welches ich auf CodePen verfasst habe, erkennt man sehr gut die Auswirkungen von
:first-child
und :first-of-type
:
See the Pen Erste .klasse ansprechen by Vladimir (@vladimir-simovic) on CodePen.
Aber wozu kann das nützlich sein, wird sich jetzt manch einer Fragen? Im konkreten Fall wo ich neulich :first-of-type
eingesetzt habe ging es darum, dass ich auf einer WordPress-Installation alle ersten Bilder der Blog-Beiträge ansprechen musste, aber nur wenn sie entweder links oder rechts ausgerichtet waren.
Da aber die nicht ausgerichteten Bilder manchmal an erster Stelle standen und nicht das Ziel waren, kam ich mit :first-child
nicht weiter und musste :first-of-type
in Verbindung mit den Bilder-Klassen verwenden.
Das Pseudoelement :first-of-type
unterscheidet sich aber in noch einer anderen Hinsicht vom :first-child
. Das :first-child
spricht wirklich nur das erste Kind an, während :first-of-type
so fern man es nicht an ein Element oder Klasse „bindet“ alle erste Vorkommen anspricht, was man in diesem Beispiel gut erkennen kann.
Und wie schaut es mit der Unterstützung durch die Browser aus? Laut „Can I Use“ unterstützen alle relevanten Browser sowohl :first-of-type
als auch die anderen mit CSS3 eingeführten Selektoren.
Weiterführende Links
- Dokumentation und Beispiel von
:first-child
auf MDN - Dokumentation und Beispiel von
:first-of-type
auf MDN - Beitrag zu
:first-child
auf CSS-Tricks.com - Beitrag zu
:first-of-type
auf CSS-Tricks.com