Ü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

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari
Grundlegende Unterstützung 4.0 3.0 (1.9) 7[1] 9.5 4
Merkmal Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Grundlegende Unterstützung 1.0 1.0 (1.9.1) 7[1] 10.0 3.1

[1] Internet Explorer 7 aktualisiert die Stile nicht, wenn Elemente dynamisch hinzugefügt werden. Im Internet Explorer 8, wenn ein Element dynamisch eingefügt wird, indem auf einen Link geklickt wird, wird der :first-child Stil erst angewendet, sobald der Link den Fokus verliert.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

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