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
- 18.0
- 12.x
- 5.1
- 23.0
- 9.0/10.0
Greift auf das letzte Element innerhalb eines Knotens zu.
Beispiel
Punkt 1
Punkt 2
Punkt 3
div.example * {
border-bottom: 1px solid #36628A;
padding-bottom: 3px;
}
div.example *:last-child {
border-bottom: none;
}
<div class="example">
<p>Punkt 1</p>
<h4>Punkt 2</h4>
<p>Punkt 3</p>
</div>
3. nth-child
- 18.0
- 12.x
- 5.1
- 23.0
- 9.0/10.0
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
- 18.0
- 12.x
- 5.1
- 23.0
- 9.0/10.0
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
- 18.0
- 12.x
- 5.1
- 23.0
- 9.0/10.0
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;
}
<p class="example-only">
<span>Bla blubb</span> blubber <span>laber</span>.
</p>
<p class="example-only">
Laber schwall <span>Jodelblah</span>.
</p>
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt