Zrozumienie selektora CSS :nth-child().

Podobnie jak wszystkie selektory CSS, możesz użyć :nth-child() do identyfikowania elementów na stronie internetowej i stosowania do nich stylów. Jednak ten selektor pozwala zawęzić zbiór rodzeństwa na podstawie ich względnej pozycji.

Selektor obsługuje kilka podstawowych słów kluczowych dla typowych przypadków, ale zapewnia także potężną składnię dopasowywania wzorców. Za jego pomocą możesz wybierać elementy w oparciu o regularne, powtarzające się wzorce lub bardziej złożone definicje, w zależności od potrzeb.

Składnia selektora :nth-child().

Jak Selektor pseudoklasy CSS, składnia :nth-child() różni się od składni innych selektorów. Przyjmuje argument jako wzór dopasowywania elementów w zestawie rodzeństwa:

:nth-child(args) {
/*...*/
}

Główny nacisk położony jest na argumenty w nawiasach. Argumenty te definiują podzbiór elementów do wybrania.

Używanie wartości słów kluczowych w typowych przypadkach

Selektor ten może pomieścić dwie wartości słów kluczowych:

dziwne I nawet. Są szczególnie przydatne do stylizowanie alternatywnych wierszy w tabeli.

Prosta uporządkowana lista to kolejny dobry przykład użycia tych wartości słów kluczowych:

<ol>
<li>Item 1li>
<li>Item 2li>
<li>Item 3li>
<li>Item 4li>
<li>Item 5li>
<li>Item 6li>
<li>Item 7li>
ol>

Używając :n-dziecko (nieparzyste) selektora, możesz zmienić kolor każdego alternatywnego elementu:

:nth-child(odd) {
color: red;
}

Elementy zaczynają się od indeksu 1, więc pierwszy element będzie wyświetlany na czerwono, potem trzeci i tak dalej:

Notacja funkcjonalna zapewniająca większą elastyczność

Możesz użyć pojedynczej liczby całkowitej, aby wybrać pojedynczy element, na przykład:

li:nth-child(4) {
color: red;
}

W tym przypadku selektor dopasowuje tylko czwartą pozycję na liście:

Ta składnia jest szczególnym przypadkiem bardziej ogólnej składni funkcjonalnej, która wybiera elementy pasujące do danego wzorca. Ta składnia jest następująca:

:nth-child(An+B) {
/*...*/
}

W tym zapisie A to wielkość kroku. Oznacza to, ile razy selektor zostanie przesunięty, aby wybrać następny element. Pozwala wybrać co drugi element, co trzeci element itp. B jest punktem początkowym, w którym rozpoczyna się selekcja.

Weźmy na przykład argument 3n+1:

li:nth-child(3n+1) {
color: red;
}

Spowoduje to rozpoczęcie selekcji od pierwszego elementu i kontynuowanie wyboru co trzeciego elementu:

Porównaj to z wyrażeniem 3n+2:

li:nth-child(3n+2) {
color:red;
}

To nadal wybiera co trzeci element, ale teraz zaczyna się od drugiego elementu na liście:

Innym interesującym przykładem jest :nth-child (n+3):

li:nth-child(n+3) {
color: red;
}

Ten wybierze każdy element (n), zaczynając od trzeciego (+3). Będzie to wyglądać tak:

Możesz także użyć odejmowania, aby osiągnąć określone wyniki:

li:nth-child(3n-1) {
color: red;
}

W tym przykładzie nadal wybierany jest co trzeci element, ale zaczyna się od „najpierw minus”. W efekcie oznacza to, że wybierze drugą pozycję na liście, potem piątą i tak dalej:

z Składnia

Możesz także użyć słowa kluczowego z następnie a selektor jako argument w selektorze :nth-child(). Ta składnia pozwala zawęzić możliwe elementy wybierane przez zwykły wzorzec.

Załóżmy na przykład, że Twój znacznik jest bardziej skomplikowany niż oryginał:

<ol>
<liclass="old">Item 1li>
<liclass="new">Item 2li>
<liclass="new">Item 3li>
<liclass="old">Item 4li>
<liclass="new">Item 5li>
<liclass="new">Item 6li>
<liclass="new">Item 7li>
ol>

Teraz użyj :nth-child, aby wybrać parzyste elementy ze zbioru tych z określoną klasą:

.new {
font-weight: bold;
}
li:nth-child(evenof.new) {
color: red;
}

Zwróć uwagę, że tylko pogrubione elementy o numerach parzystych są czerwone:

Zastanów się także, czym to się różni od li.new: n-te dziecko (parzyste) który celuje w .new elementy, ale tylko jeśli są parzyste. Będą to pozycje 2 i 6 w powyższym przykładzie.

Praca z selektorem :nth-child().

Unikalne projekty można uzyskać za pomocą selektora :nth-child(). Możesz tworzyć kolorowe strony internetowe i wyróżniać wiersze i kolumny w tabelach danych. Połączenie go z innymi selektorami CSS pomoże Ci stworzyć złożone układy i projekty.