Mit dem :first-of-typeSelektor in CSS können Sie das erste Auftreten eines Elements in seinem Container als Ziel festlegen. Es wird in der CSS Selectors Level 3-Spezifikation als „strukturelle Pseudoklasse“ definiert, dh es wird verwendet, um Inhalte basierend auf ihrer Beziehung zu übergeordneten und Geschwisterinhalten zu formatieren.
Angenommen, wir haben einen Artikel mit einem Titel und mehreren Absätzen:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Wir möchten den ersten Absatz als eine Art „Lede“ oder einleitenden Absatz vergrößern. Anstatt ihm eine Klasse zu geben, können wir ihn :first-of-typeauswählen:
p:first-of-type ( font-size: 1.25em; )Die Verwendung :first-of-typeist sehr ähnlich, :nth-childaber mit einem entscheidenden Unterschied: Sie ist weniger spezifisch. Wenn wir im obigen Beispiel verwendet hätten p:nth-child(1), würde nichts passieren, da der Absatz nicht das erste Kind seines Elternteils (des ) ist. Dies zeigt die Kraft von :first-of-type: Es zielt auf einen bestimmten Elementtyp in einer bestimmten Anordnung in Bezug auf ähnliche Geschwister ab, nicht auf alle Geschwister.
Das ausführlichere Beispiel unten zeigt die Verwendung :first-of-typeeines verwandten Pseudoklassen-Selektors :last-of-type.
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funktioniert | 3.2+ | Funktioniert | 9,5+ | 9+ | Funktioniert | Funktioniert |
:first-of-typewurde in CSS Selectors Module 3 eingeführt, was bedeutet, dass alte Versionen von Browsern dies nicht unterstützen. Die moderne Browserunterstützung ist jedoch einwandfrei, und die neuen Pseudoselektoren werden häufig in Produktionsumgebungen verwendet. Wenn Sie ältere Browserunterstützung benötigen, entweder Polyfill für IE, oder verwenden Sie diese Selektoren auf unkritische Weise á la progressive Verbesserung, was empfohlen wird.