Przykład
Określa kolor tła dla każdego <p> element, który jest drugim dzieckiem swojego rodzica:
p:nth-child(2)
{
background: #ff0000;
}
Spróbuj sam " Więcej "Try it Yourself" przykłady poniżej.
Definicja i Wykorzystanie
:nth-child( n ) selektor pasuje do każdego elementu, który jest n th dziecka, niezależnie od typu, jego rodzica.
n może być liczbą, słowo kluczowe lub formułą.
Tip: Spójrz na : nth-of-type () wybieraka, aby wybrać element, który jest n th dziecko of a particular type , jego rodzica.
| Wersja: | CSS3 |
|---|
Pomoc Browser
Liczby w tabeli określa pierwszą wersję przeglądarki, która w pełni obsługuje wybierak.
| Selektor | |||||
|---|---|---|---|---|---|
| :nth-child() | 4,0 | 9,0 | 3,5 | 3,2 | 9,6 |
Składnia CSS
Więcej przykładów
Przykład
Parzyste i nieparzyste są słowa kluczowe, które można wykorzystać do elementów o indeksach nieparzystych i parzystych (the index of the first child is 1) .
Tutaj możemy podać dwa różne kolory tła dla elementów nieparzystych i parzystych t:
p:nth-child(odd)
{
background: #ff0000;
}
p:nth-child(even)
{
background: #0000ff;
}
Spróbuj sam " Przykład
Stosując wzór ( an + b ) . Opis: reprezentuje wielkość cyklu, a n jest licznik (starts at 0) , a b jest wartością przesunięcia.
Tutaj możemy określić kolor tła dla wszystkich elementów p, których indeks jest wielokrotnością liczby 3:
p:nth-child(3n+0)
{
background: #ff0000;
}
Spróbuj sam "