Übersicht: Selektoren in CSS3

kein CSS-Selector:

ein bestimmtes Elemente über CSS selektieren

erstes Element
:first-child


letztes Element (mehr)
:last-child


drittes Element (mehr)
:nth-child(3)


drittes Element vom Ende
:nth-last-child(3)

mehrere Elemente über CSS selektieren
(gleichartige Elemente + wenn genügend vorhanden)

alle ungeraden
:nth-child(odd)


alle geraden
:nth-child(even)


Berechnung anhand Formel
:nth-child(3n)

Elemente ohne Inhalt

Hier können alle Elemente ohne einen Inhalt angesprochen werden. Das wird in der Praxis gerne Tabellenzellen ohne Inhalt sein.

Elemente ohne Inhalt
:empty

  • X
  • X
  • X
  • X
  • X

Elemente die NICHT dem Selektor entsprechen

Wenn bei unserer Aufzählung den ersten 4 der Klassenselektor .da zugewiesen wurde, können wir alle andere selektieren, die diese Klasse nicht haben. CSS-Anweisung: li:not(.da)

ohne bestimmten Selektor
:not(SELEKTOR)

  • .da
  • .da
  • .da
  • .da

Elemente die nur EINMAL in Elternelement vorkommen

Wenn ein übergeordnetes Element (Elternelement) nur 1 einziges Kindelement besitzt, kann dies über den :only-child Selektor ausgewählt werden. Im Beispiel hat die <ul> nur ein einiges <li>. Die zweite Liste ist unberührt, da es dort 2 Elemente gibt.

nur 1 Kindelement
:only-child

  • p
  • li
  • p
  • p
  • li
  • li
  • p

-of-type Elemente desselben Typs

Mit den Struktur-Pseudoklassen

  • :first-of-type
  • :last-of-type
  • :nth-of-type(x)
  • :nth-last-of-type(x)
  • :only-of-type

werden Elemente desselben Typs angesprochen. Im ersten Augenblick fühlen sie diese CSS-Selektoren sehr ähnlich wie ihre Kollegen von der Fraktion :nth-child(x) an, aber die Feinheiten sind es.

:checked Selektor für angewählte Checkboxen

Hier kann auf eine durch den Benutzer angekreuzte Checkboxen reagiert werden. So kann z.B. die angekreuzte Checkbox hervorgehoben werden.