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-childauf MDN - Dokumentation und Beispiel von
:first-of-typeauf MDN - Beitrag zu
:first-childauf CSS-Tricks.com - Beitrag zu
:first-of-typeauf CSS-Tricks.com
