Pseudoklasse nth-last-child
Der Pseudoklasse nth-last-child wählt
ein Element aus, das das n-te Kind des
Elternelements ist, gezählt vom Ende her. Verhält sich
ähnlich wie nth-child,
nur dass die Zählung vom Ende her erfolgt.
Syntax
Selektor:nth-last-child(Zahl | odd | even | Ausdruck) {
}
Werte
| Wert | Beschreibung |
|---|---|
| Zahl |
Eine positive Zahl beginnend bei 1.
Gibt die Nummer des Elements an, das wir
ansprechen möchten. Die Nummerierung der Elemente beginnt bei 1.
|
odd |
Ungerade Elemente. |
even |
Gerade Elemente. |
| Ausdruck |
Es können spezielle Ausdrücke mit dem Buchstaben n gebildet werden,
der alle ganzen Zahlen von null (nicht von eins)
bis unendlich repräsentiert. So bedeutet 2n alle geraden
Nummern (beginnend mit der zweiten).
Wie ist das zu verstehen? Wir setzen in n der Reihe nach
Zahlen ab 0 ein und so weiter: wenn n = 0, dann ergibt 2n 0 -
ein solches Element gibt es nicht (Elementnummerierung beginnt bei 1),
wenn n = 1, dann ergibt 2n 2 - das zweite Element, wenn n = 2,
ergibt 2n 4 - das vierte Element. Wenn man 3n schreibt, wird
jedes dritte Element ausgewählt (beginnend mit dem dritten), und so weiter.
|
Beispiel
In diesem Beispiel färben wir das
li-Element, das das 4.-te vom Ende gezählte
Kind seines Elternelements ist, rot:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-last-child(4) {
color: red;
}
:
Beispiel
Jetzt färben wir alle
vom Ende her geraden li rot:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-last-child(even) {
color: red;
}
:
Beispiel
Jetzt färben wir alle vom Ende her ungeraden
li rot:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-last-child(odd) {
color: red;
}
:
Beispiel
Jetzt färben wir jedes dritte
vom Ende gezählte li rot:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-last-child(3n) {
color: red;
}
:
