CSS, HTML und Javascript mit {stil}

CSS Selector nth-child, nth-of-type, not, empty

CSS3 Pseudo-Selektor nth Child not empty

Pseudo-Selektoren, die den möglichen Zustand eines Elements durch einen Doppelpunkt kennzeichnen, kennen wir von :hover und :active. CSS nth-child(), not, empty und disabled erweitern die Pseudo-Selektoren.

nth-child(even) und nth-child(odd) filtern gerade und ungerade Element-Positionen und vereinfachen die Wahl von Elementen aus Listen. Mit :last-child erreicht CSS das letzte Element einer Liste. :empty und :not sparen Javascript-Erweiterungen von CSS.

Internet Explorer untertützt CSS3-Selektoren ab Version 9.

E:not(P)

Alle Elemente, die dem Selektor nicht entsprechen

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

E:empty

Elemente ohne Inhalt

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

E:last-child

wie CSS :first-child, aber filtert vom letzten Element an

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>

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>

Formel für nth-child

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 (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 folgt erst jetzt in CSS3. Das führt dazu, dass die älteren Versionen von Internet Explorer bis einschließlich IE 8 :last-child nicht unterstützen.

Wenn jQuery für die Seiten eingesetzt ist, bringt ein Javascript Abhilfe für ältere Browser:

$(function(){
   $("#nav li:last-child").css("border-bottom","none")
});

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

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

.exc tr:nth-child(odd) { background: gainsboro; }
.exc tr:nth-child(even) { background: #C4D6E0; }
…
<table class="exc">
Klassen- und Id-SelektorenDie ältesten und zuverlässigsten Selektoren
Pseudoelemente CSS1 und CSS2Insbesondere für die Gestaltung von Links in bestimmten Zuständen verwendet
Pseudoelemente CSS3Besonders interessant für Listen und Tabellen
Attribut-Selektoren Filtern HTML-Elemente anhand ihrer Attribute
Kontext-Selektoren Wählen HTML-Elemente anhand ihrer relativen Position innerhalb der Struktur

:empty

Der Selektor :empty filtert leere Tabellenzellen.

td:empty { background: white; }
float Schwebendes Element
clearZwingt das Element an den links bzw. rechten Rand
top right bottom leftPosition eines absolut positionierten Elements
z-index 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
}