CSS :empty, :first-of-type, :last-of-type, :only-child, :last-child …

Doppelpunkt oder zwei Doppelpunkte? Pseudo-Klassen, Pseudo-Elemente

Pseudo-Klassen wie nth-child, not und empty weisen CSS-Stile entsprechend ihrer Position zu und werden mit einem einzelnen Doppelpunkt (:) angesprochen. Pseudo-Klassen stehen immer am Ende der Selektor-Kette.

Pseudo-Elemente, die den möglichen Zustand eines Elements durch einen zwei Doppelpunkte (::) kennzeichnen, kennen wir von ::hover und ::active. Sie sprechen auch Teile eines Textes ohne eigenes HTML-Element an, z.B. ::first-line und ::first-letter. Pseudo-Elemente können an beliebiger Stelle im Selektor stehen.

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:empty

Elemente ohne Inhalt

li:empty { background: blue }

• li
• li
• li
• li

leere Tabellenzellen mit :empty filtern.

td:empty { background: gainsboro; }

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
}

:checked

Die Farbe von inaktiven Eingabefeldern lässt sich verändern. Checkboxen verändern ihre Position, wenn der Benutzer sie aktiviert – z.B. um aktivierte Checkboxen in einer längeren Serie von Checkboxen hervorzuheben.

<input id="rot" type="checkbox" />
<label for="rot"> Rot </label>

#name:disabled { background: gainsboro }

input[type=checkbox] + label { 
    color: firebrick;
}

input[type=checkbox]:checked + label { 
    border-bottom: 1px solid green;
    color: green;
}