:last-child / :first-child Selektoren – CSS3 Adventskalender Tag 11

Im Tag 11 des CSS3 Adventskalender betrachten wir die Struktur-Pseudoklasse :first-child und :last-child näher.

Als Beispiel erstellen wir eine einfache ungeordneten Liste mit drei Listenpunkten:

HTML

<ul>
  <li>eins</li>
  <li>zwei</li>
  <li>drei</li>
<ul>

CSS

li {
  color: red;
  font-weight: bold
}

Selektion des ersten Kindelements der Liste

li:first-child {
  color: black
}

Selektion des letzten Kindelements der Liste

li:last-child {
  color: #ffdc00
}

Definition

• li:first-child – bedeutet das erstes Kind seines Elternelements ul wird selektiert
• li:last-child – bedeutet das letzte Kind seines Elternelements ul wird selektiert

Browser-Support:

Alle modernen Browser (inkl. IE9 beta) unterstützen die CSS3 Pseudo-Klasse :last-child.
Die Auswahl des ersten Kindelements mit :first-child wird bereits mit CSS2.1 ab IE7 unterstützt!

Demo

Dadurch, dass der Pseudoselektor :first-child bereits seit der Version 7 des Internet Explorer verwendet werden kann, würde ich browserübergreifen aktuell nur diese Möglichkeit wählen. Als Beispiel habe ich eine News-Liste erstellt, bei der die Listenpunkte durch Striche in der Grafikvorlage getrennt wurden. Man könnte meinen, dass jeder Listenpunkt ein Strich folgt (border-bottom), nur nicht nach dem letzten News-Punkt. Da könnte man auf die Idee kommen den CSS3 Pseudo-Selektor :last-child zu verwenden. Das das erst im IE9 funktioniert, sollte man die Logik einfach umkehren um Browser ab IE7 zu unterstützen. Bedeutet also, dass jeder News-Listenpunkt einen border-top erhält, und nur der erste eben nicht.

Demo-Datei zu :first-child & :last-child aufrufen

Am Tag 12 geht es um Webstandard-Blog um Media-Queries