:first-child

Übersicht

Die :first-child CSS Pseudoklasse repräsentiert jedes Element, das das erste Kindelement seines Elternelements ist.

Syntax

element:first-child { Stileigenschaften }

Beispiele

Beispiel 1

HTML Inhalt

<div>
  <span>Dieser Text ist grün!</span>
  <span>Dieser Text nicht. :(</span>
</div>

CSS Inhalt

span:first-child {
    background-color: lime;
}

... sieht folgendermaßen aus:

Beispiel 2 - Verwendung von UL

HTML Inhalt

<ul>
  <li>Eintrag 1</li>
  <li>Eintrag 2</li>
  <li>Eintrag 3</li>
</ul>

CSS Inhalt

li{
  color:red;
}
li:first-child{
  color:green;
}

... sieht folgendermaßen aus:

Spezifikationen

Spezifikation Status Kommentar
Selectors Level 4
Die Definition von ':first-child' in dieser Spezifikation.
Arbeitsentwurf Keine Änderung
Selectors Level 3
Die Definition von ':first-child' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
:first-childChrome Vollständige Unterstützung 4Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 3IE Vollständige Unterstützung 7
Hinweise
Vollständige Unterstützung 7
Hinweise
Hinweise Internet Explorer 7 doesn't update :first-child styles when elements are added dynamically.
Hinweise In Internet Explorer 8, if an element is inserted dynamically by clicking on a link, then the :first-child style isn't applied until the link loses focus.
Opera Vollständige Unterstützung 9.5Safari Vollständige Unterstützung 3.1WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 10.1Safari iOS Vollständige Unterstützung 4Samsung Internet Android Vollständige Unterstützung Ja
Matches elements with no parentChrome Vollständige Unterstützung 57Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 52IE Keine Unterstützung NeinOpera Vollständige Unterstützung 44Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 57Chrome Android Vollständige Unterstützung 57Firefox Android Vollständige Unterstützung 52Opera Android Vollständige Unterstützung 43Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung 7.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

Siehe auch