CSS je nach Position im DOM :first-of-type, :last-of-type, :only-child, :last-child …

Übersicht: CSS-Stile je nach Position

:first-child

Erstes Kindelement eines Elternelements

li:first-child { color: blue }

:last-child

Letztes Kindelement eines Elternelements

li:last-child { color: blue }

:nth-child

n-tes Kindelement eines Elternelements

li:nth-child(3) { color: blue }

:nth-last-child(n)

n-tes Kindelement eines Elternelements von der letzten Position aus

li:nth-last-child(3) { color: blue }

:only-child

Ein Kindelement, das das einzige Kind seines Elternelements ist

li:only-child { color: blue }

:first-of-type

Das erste Element eines bestimmten Typs unter den Geschwistern

li:first-of-type { color: blue }

:last-of-type

Das letzte Element eines bestimmten Typs unter den Geschwistern

li:last-of-type { color: blue }

:nth-of-type

Das n-te Element eines bestimmten Typs unter den Geschwistern

li:nth-of-type(3) { color: blue }

:nth-last-of-type

Das n-te Element eines bestimmten Typs unter den Geschwistern von der letzten Position aus

li:nth-last-of-type(3) { color: blue }

:only-of-type

Das einzige Element eines bestimmten Typs unter den Geschwistern

li:only-of-type { color: blue }

:empty

Element ohne Inhalt

li:empty { color: blue }

Element:first-child

Typische Beispiele sind der erste Ansatz p direkt unterhalb eines article- oder section-Elements oder das erst li-Element direkt unterhalb eines ul-Elements. Statt dem ersten Absatz unterhalb eines article- oder section-Elements eines eigene CSS-Klasse zuzuweisen, um den ersten Absatz z.B. durch eine größere Schrift zu kennzeichen, ist section p:first-child flexibler. Wenn irgendwann der erste Absatz gegen einen neuen ausgetauscht wird, muss die Klasse vom alten Absatz nicht entfernt und vor den neuen Absatz gesetzt werden.

:first-child stylt das erste Kindelement eines übergeordneten Elements.

li:first-child {background: blue}

Anstelle von first-child kann auch nth-child(1) eingesetzt werden. Beide Schreibweisen bringen dasselbe Ergebnis: Sie sind gleich spezifisch und zeigen dasselbe Verhalten. Allenfalls wäre vielleicht :first-child besser lesbar als :nth-child(1), andererseits ist :nth-child(an+b) allgemeiner.

Element:first-of-type, Element:last-of-type

filtert das erste bzw. letzte Element dieses Typs innerhalb seines Elternelements – ist also spezifischer als first-child oder last-child.

.dbox p:first-of-type {background: orange}

<div class="dbox">
  <ul>
	<li></li>
	<li></li>
  </ul>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <div></div>
  <div></div>
</div>

Element:only-child

Elemente, die das einzige Kind ihres Elternelements sind

li:only-child {background: crimson}

<div class="dbox">
  <ul>
	<li></li>
  </ul>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <div></div>
  <div></div>
</div>

Element:only-of-type

Elemente, die das einzige Kind mit diesem Selektor innerhalb ihres Elternelements sind

p:only-of-type {background: black}

<div class="dbox"><p></p><p></p></div>
<div class="dbox"><p></p></div>
<div class="dbox"><p></p><p></p></div>

Element:last-child

CSS :first-child wurde bereits in CSS2 standardisiert, :last-child folgte erst in CSS3.

Das meistgenutzte last-child ist sicher das letzte li innerhalb eines ul-Elements, denn ul-Elemente sind der Klassiker der Navigation auf Webseiten.

last-child agiert ähnlich wie last-of-type, nur weniger spezifisch.

Wird die Navigation auf den kleineren Screens der mobilen Geräte als vertikale Liste dargestellt, wird das jeweils letzte Element einer Liste als border-bottom: none notiert.

nav li {
	border-bottom: 1px dotted white;
}
nav li:last-child {
	border-bottom: none
}

Element:empty

:empty ist ein Sonderling unter den strukturellen Selektoren: Er sucht nach Elementen ohne Inhalt und absolute kinderlos, weder Elemente noch Text. Sogar Leerzeichen und Zeilenumbruch zählen schon als Inhalt, dann wäre :empty nicht am Zug.

Während :nth-child die Frage nach der Position des Elements ist, ist :empty also die Frage, ob das Element überhaupt Kinder hat.

li:empty { background: blue }

• li
• li
• li
• li

leere Tabellenzellen mit :empty filtern.

td:empty { background: gainsboro; }