Ü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 AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 4Edge Vollständige Unterstützung JaFirefox 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 JaChrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 9.5Safari iOS Vollständige Unterstützung 4Samsung Internet Android Vollständige Unterstützung Ja
Matches elements with no parentChrome Vollständige Unterstützung 57Edge ? Firefox Vollständige Unterstützung 52IE ? Opera Vollständige Unterstützung 44Safari ? WebView Android Vollständige Unterstützung 57Chrome Android Vollständige Unterstützung 57Edge Mobile ? Firefox Android Vollständige Unterstützung 52Opera Android Vollständige Unterstützung 44Safari iOS ? Samsung Internet Android Vollständige Unterstützung 7.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, Sebastianz
Zuletzt aktualisiert von: SJW,