: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

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,