CSS :nth-child() Selektor
Przykład
Określ kolor tła dla każdego elementu <p>, który jest drugim dzieckiem swojego rodzica:
p:nth-child(2)
{
background: red;
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Selektor dopasowuje każdy element, który jest n - tym dzieckiem, niezależnie od typu, jego rodzica.:nth-child(n)
n może być liczbą, słowem kluczowym lub formułą.
Wskazówka: Spójrz na selektor :nth-of-type() , aby wybrać element, który jest n - tym dzieckiem określonego typu jego rodzica.
Wersja: | CSS3 |
---|
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje selektor.
Selector | |||||
---|---|---|---|---|---|
:nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Składnia CSS
:nth-child(number) {
css declarations;
}
Więcej przykładów
Przykład
Nieparzyste i parzyste to słowa kluczowe, których można użyć do dopasowania elementów potomnych, których indeks jest nieparzysty lub parzysty (indeks pierwszego dziecka to 1).
Tutaj określamy dwa różne kolory tła dla nieparzystych i parzystych elementów p:
p:nth-child(odd)
{
background: red;
}
p:nth-child(even)
{
background: blue;
}
Przykład
Używając formuły ( an + b ). Opis: a oznacza wielkość cyklu, n to licznik (zaczyna się od 0), a b to wartość przesunięcia.
Tutaj określamy kolor tła dla wszystkich elementów p, których indeks jest wielokrotnością 3:
p:nth-child(3n+0)
{
background: red;
}