CSS Selector nth-child, nth-of-type

CSS Pseudo class nth child, even, odd und empty

Pseudo-Klassen wie nth-child, not und empty filtern gerade und ungerade Element-Positionen oder jedes dritte Element, klammern Elemente auf der Basis einfacher Selektoren aus (not) und erkennen leere Elemente (empty).

Diese Selektoren sparen Javascript-Erweiterungen von CSS.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Pseudo-Klassen

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 Doppelpunkt 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.

E:not(P)

Alle Elemente, die dem Selektor nicht entsprechen. Das Ausklammern mit :not(X) nimmt einen einfachen Selektor wie eine Klasse, einen ID-Selektor oder ein href-Attribut in den runden Klammern, aber keine weitere Negation, also kein weiteres not.

li:not(.mia) { background: firebrick }

Mehr zum CSS :not-Selektor

E:empty

Elemente ohne Inhalt

li:empty { background: blue }
  • m
  • m
  • m
  • m

E:last-child

wie CSS :first-child, aber filtert das letzte Kind eines Eltern-Elements

li:last-child { background: blue }

E:nth-child(odd)

Filtert bei gleichartigen Elementen alle Elemente mit ungeradem Index

li:nth-child(odd) { background: blue }

E:nth-child(even)

Filtert bei gleichartigen Elemente alle Elemente mit geradem Index

li:nth-child(even) { background: blue }

E:nth-child(3)

filtert das n-te Kindelement eines HTML-Elements

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

E:nth-last-child(3)

wie nth-child, aber beginnt am Ende

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

E:first-of-type, E: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>
		
  • li
  • li

p

p

p

p

d
d

nth-of-type(odd)

wie nth-child, wirkt nur bei Elementen eines Typs

p:nth-of-type(odd){background:orange}
		<div class="dbox">
		  <ul>
			<li></li>
			<li></li>
		  </ul>
		  <p></p>
		  <p></p>
		  <p></p>
		  <p></p>
		  <div></div>
		  <div></div>
		</div>
		

nth-last-of-type(odd)

wie nth-of-type, aber zählt vom Ende an

p:nth-last-of-type(odd) {background:orange}

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>

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>

:nth-child(odd) und nth-child(even)

Tabellenzeilen lassen sich mit einem geringen Aufwand abwechselnd einfärben – das erleichtert in langen Tabellen die Lesbarkeit.

tr:nth-child(odd) { background: gainsboro; }
tr:nth-child(even) { background: ivory; }
Klassen- und Id-SelektorenDie ältesten und zuverlässigsten Selektoren
Pseudo-ElementeZustände von HTML-Elementen filtern
CSS Pseudo-KlassenBesonders interessant für Listen und Tabellen
Attribut-SelektorenFiltern HTML-Elemente anhand ihrer Attribute
Kontext-SelektorenWählen HTML-Elemente anhand ihrer relativen Position innerhalb der Struktur

Formeln für nth-child

Jede vierte Zelle in jeder Zeile einer Tabelle, beginend beim ersten Element (1, 5, 9, 13, 17, …).

.week td:nth-child(4n + 1) {
	background-color: #efefef
}
Mo29364283276 Mo27836272290 Mo21743238276
Di45753267289 Di36059253297 Di30823208267
Mi67186273282 Mi69601253290 Mi51301198255
Do73209229282 Do70611194295 Do56677183250
Fr74352267288 Fr61288228285 Fr50968186250
Sa64346246288 Sa53697229284 Sa42813181238
So42055258290 So32646241297 So29348199237

Wenn jedes dritte Element einer Reihe gefiltert werden soll, und zwar beginnend mit dem zweiten Element, liefert eine Formel das Element ans CSS.

a + ( n - 1 ) * d
|       |      |
|       |      +-- Abstand (»jedes 3. Element«)
|       |
|       +-- Multiplikator
|
+-- erstes Element (Beispiel beginnt beim 2. Element) 

  a + ( n - 1 ) * d
= 2 + ( n - 1 ) * 3
= 2 + ( 3n - 3)
= 2 + 3n - 3
= 3n - 1
li:nth-child(3n-1) { background: red }

:last-child

CSS :first-child wurde bereits in CSS2 standardisiert, :last-child folgte erst in CSS3. Das führte dazu, dass die älteren Versionen von Internet Explorer bis einschließlich IE 8 :last-child nicht unterstützten.

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

:empty

Der Selektor :empty filtert leere Tabellenzellen.

td:empty { background: gainsboro; }
float 17Schwebendes Element
clearZwingt das Element an den links bzw. rechten Rand
top right bottom leftPosition eines absolut positionierten Elements
z-index22 Position in der dritten Dimension an

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

HTML
<input id="rot" type="checkbox" />
<label for="rot"> Rot </label>
CSS
#name:disabled { background: silver }

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

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