Hauptmenü

Untermenü

CSS3 - Pseudoklassen - Kinder

1. Endlich

... hat mal einer ein Einsehen mit den armen Webentwicklern gehabt und die direkten Zugriffsmöglichkeiten auf Elemente erheblich verfeinert. Zur Erinnerung, bei CSS2 gibt es nur first-child. Will man darüber hinaus auf andere bestimmte Elemente ohne Klasse oder ID zugreifen, muss man sich mit JavaScript behelfen. Seit CSS3 ist damit nun Schluss. Denn da kann man sich relativ problemlos auch so durch den DOM-Baum hangeln.

2. last-child

Greift auf das letzte Element innerhalb eines Knotens zu.

Beispiel

Punkt 1

Punkt 2

Punkt 3


div.example * {
  border-bottom1px solid #36628A;
  padding-bottom3px;
}
div.example *:last-child {
  border-bottomnone;
}
<div class="example">
  <p>Punkt 1</p>
  <h4>Punkt 2</h4>
  <p>Punkt 3</p>
</div>

3. nth-child

Beeinflusst das x-te (nte) Element innerhalb eines Knotens. Als Parameter gibt man die Position angefangen bei 1 an.

Beispiel

  • Punkt 1
  • Punkt 2
  • Punkt 3
  • Punkt 4

ul.example li:nth-child(3) {
  color#f00;
}
<ul class="example">
  <li>Punkt 1</li>
  <li>Punkt 2</li>
  <li>Punkt 3</li>
  <li>Punkt 4</li>
</ul>

Startposition und Intervalle

Damit kann man die Zugriffe verfeinern. Das Schema sieht so aus: ([Intervall]n + Startposition). Im folgenden Beispiel besagt die Anweisung, dass beginnend mit Position 4 auch noch jedes weitere zweite Element entsprechend formatiert wird. Ach ja, die Startposition kann man auch weglassen, wenn man sie nicht benötigt.

Beispiel

  • Punkt 1
  • Punkt 2
  • Punkt 3
  • Punkt 4
  • Punkt 5
  • Punkt 6
  • Punkt 7
  • Punkt 8

ul.example-nth li:nth-child(2n+4) {
  color#f00;
}
<ul class="example-nth">
  <li>Punkt 1</li>
  <li>Punkt 2</li>
  <li>Punkt 3</li>
  <li>Punkt 4</li>
  <li>Punkt 5</li>
  <li>Punkt 6</li>
  <li>Punkt 7</li>
  <li>Punkt 8</li>
</ul>

4. nth-last-child

Arbeitet genauso wie nth-child, fängt aber hinten an.

Beispiel

  • Punkt 1
  • Punkt 2
  • Punkt 3
  • Punkt 4

ul.example-last li:nth-last-child(3) {
  color#f00;
}
<ul class="example">
  <li>Punkt 1</li>
  <li>Punkt 2</li>
  <li>Punkt 3</li>
  <li>Punkt 4</li>
</ul>

Auch hier kann man mit einer Startposition und Intervallen arbeiten. Dann wird einfach von unten nach oben gezählt. Und nein, man setzt anstelle des Pluszeichens kein Minus.

5. only-child

Hat nur dann Auswirkungen, wenn das ausgewählte Element das Einzige(!) innerhalb eines Knotens ist.

Beispiel

Bla blubb blubber laber.

Laber schwall Jodelblah.


p.example-only span:only-child {
  color#f00;
}
<class="example-only">
  <span>Bla blubb</spanblubber <span>laber</span>.
</p>
<class="example-only">
  Laber schwall <span>Jodelblah</span>.
</p>

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt