Übersicht
Die :first-of-type CSS Pseudoklasse repräsentiert den ersten Geschwisterknoten eines Typs in der Liste der Kindknoten des Elternelements.
Syntax
element:first-of-type { Stileigenschaften }
Beispiel
Dieses Beispiel zeigt, wie der universelle Selektor angenommen wird, falls kein einfacher Selektor angegeben wird.
div :first-of-type {
background-color: lime;
}
<div> <span>Dieser Text kommt zuerst!</span> <span>Dieser Text nicht. :(</span> <span>Was ist mit diesem <em>verschachtelten Element</em>?</span> <strike>Dies ist ein weiterer Typ.</strike> <span>Dieser leider nicht...</span> </div>
...ergibt:
Spezifikationen
| Spezifikation | Status | Kommentar |
|---|---|---|
| Selectors Level 4 Die Definition von ':first-of-type' in dieser Spezifikation. |
Arbeitsentwurf | Keine Änderung |
| Selectors Level 3 Die Definition von ':first-of-type' in dieser Spezifikation. |
Empfehlung | Ursprüngliche Definition |
Browser Kompatibilität
Update compatibility data on GitHub
| Desktop | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
:first-of-type | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung Ja | Firefox Vollständige Unterstützung 3.5 | IE Vollständige Unterstützung 9 | Opera Vollständige Unterstützung 9.5 | Safari Vollständige Unterstützung 3.2 | WebView Android Vollständige Unterstützung 2 | Chrome Android Vollständige Unterstützung 18 | Edge Mobile Vollständige Unterstützung Ja | Firefox Android Vollständige Unterstützung 4 | Opera Android Vollständige Unterstützung 10.1 | Safari iOS Vollständige Unterstützung 3.2 | Samsung Internet Android ? |
Legende
- Vollständige Unterstützung
- Vollständige Unterstützung
- Kompatibilität unbekannt
- Kompatibilität unbekannt