Pseudoklasse nth-child
Die Pseudoklasse nth-child wählt ein Element aus,
das das n-te Kind des Elternelements ist.
Syntax
Selektor:nth-child(Zahl | odd | even | Ausdruck) {
}
Werte
| Wert | Beschreibung |
|---|---|
| Zahl |
Eine positive Zahl beginnend mit 1.
Gibt die Nummer des Elements an, auf das wir zugreifen wollen.
Die Zählung 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
Zahlen (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 existiert nicht (Elementzählung 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, ist das
jedes dritte Element (beginnend mit dem dritten), und so weiter.
|
Beispiel
In diesem Beispiel färben wir dasjenige li rot,
das das 4-te Kind seines Elternelements ist:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-child(4) {
color: red;
}
:
Beispiel
Jetzt färben wir alle 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-child(even) {
color: red;
}
:
Beispiel
Jetzt färben wir alle 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-child(odd) {
color: red;
}
:
Beispiel
Jetzt färben wir jedes dritte
li rot (beginnend mit dem dritten):
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-child(3n) {
color: red;
}
:
Beispiel
Im Selektor kann ein Elementbereich angegeben werden.
Angenommen, Sie haben eine Liste mit 20
Elementen und müssen die Elemente von 7
bis 14 einschließlich auswählen. Dies kann
wie folgt gemacht werden:
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
li:nth-child(n+7):nth-child(-n+14) {
color: red;
}
:
