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.

23-02-02 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(X)

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 }
  • li
  • li
  • li
  • li

E:last-child

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

li:last-child { 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

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>

: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: gainsboro }

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

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