Beispiel
Geben Sie eine Hintergrundfarbe für jeden <p> Element , das die zweite p - Element seines Vaters ist:
p:nth-of-type(2)
{
background: #ff0000;
}
Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die :nth-of-type( n ) - n :nth-of-type( n ) Selektor passt zu jedem Element, das das ist n - ten Kind, einer bestimmten Art, seiner Mutter.
n kann eine Zahl, ein Schlüsselwort oder eine Formel sein.
Tip: Schauen Sie sich die : nth-child () Wähler das Element auszuwählen, das ist n - ten Kind, regardless of type , seiner Eltern.
| Version: | CSS3 |
|---|
Browser-Unterstützung
Die Zahlen in der Tabelle gibt die erste Browser-Version, die die Wähler voll unterstützt.
| Wähler | |||||
|---|---|---|---|---|---|
| :nth-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
CSS-Syntax
Mehr Beispiele
Beispiel
Gerade und ungerade sind Schlüsselwörter , die verwendet werden können , Elemente Kind , dessen Index ungerade oder gerade zu entsprechen (the index of the first child is 1) .
Hier geben wir zwei verschiedene Hintergrundfarben für gerade und ungerade p Elemente:
p:nth-of-type(odd)
{
background: #ff0000;
}
p:nth-of-type(even)
{
background: #0000ff;
}
Versuch es selber " Beispiel
Mit Hilfe einer Formel ( an + b ) . Beschreibung: a repräsentiert eine Zyklusgröße, n ist ein Zähler (starts at 0) , und b ist ein Offsetwert.
Hier geben wir eine Hintergrundfarbe für alle p Elemente, deren Index ist ein Vielfaches von 3:
p:nth-of-type(3n+0)
{
background: #ff0000;
}
Versuch es selber "