Większa kontrola nad opcjami :nth-child() dzięki składni S.

Wstępnie filtruje zestaw elementów podrzędnych przed zastosowaniem do niego logiki An+B.

Bramus

Selektory pseudoklas :nth-child() i :nth-last-child()

Za pomocą pseudoklasy :nth-child() można wybierać elementy w DOM według ich indeksu. Za pomocą An+Bmikroskładni możesz precyzyjnie określić, które elementy chcesz wybrać.

• :nth-child(2): wybierz drugie dziecko.
• :nth-child(2n): Wybierz wszystkie parzyste elementy podrzędne (2, 4, 6, 8 itd.).
• :nth-child(2n+1): wybierz wszystkie nieparzyste elementy podrzędne (1., 3., 5., 7. itd.).
• :nth-child(5n+1): wybierz 1. (=(5×0)+1), 6. (=(5×1)+1), 11. (=(5×2)+1), … element podrzędny.
• :nth-child(5n+2): Wybierz 2. (=(5×0)+2), 7. (=(5×1)+2), 12. (=(5×2)+2), … element podrzędny.

Jeśli jednak pominiesz parametr A, możesz dokonać bardziej kreatywnych wyborów. Na przykład:

• :nth-child(n+3): Wybierz wszystkie elementy podrzędne od trzeciego w kolejności (3., 4., 5. itd.).
• :nth-child(-n+5): wybierz każde dziecko do 5. włącznie (1., 2., 3., 4., 5.).

Połącz kilka z tych :nth-child() wyborów, aby wybrać zakresy elementów:

• :nth-child(n+3):nth-child(-n+5): wybierz wszystkie elementy podrzędne od 3 do 5 (3, 4, 5).

Za pomocą :nth-last-child() możesz dokonywać podobnych wyborów, ale zamiast liczyć od początku, zaczynasz liczyć od końca.

Wstępne filtrowanie za pomocą składni of S

Nowością w selektorach CSS poziomu 4 jest możliwość opcjonalnego przekazywania listy selektorów do funkcji :nth-child() i :nth-last-child().

:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)

Jeśli podasz wartość of S, logika An+B będzie stosowana tylko do elementów pasujących do podanej listy selektorów S. Oznacza to, że możesz wstępnie odfiltrować dzieci, zanim An+B wykona swoje zadanie.

Przykłady

Na przykład :nth-child(2 of .highlight) wybiera drugi pasujący element, który ma klasę .highlight. Inaczej mówiąc: spośród wszystkich elementów podrzędnych klasy .highlight wybierz drugi.

W przeciwieństwie do selektora .highlight:nth-child(2), który wybiera element z klasą .highlight i będący drugim elementem podrzędnym.

Różnicę tę widać w poniższej wersji demonstracyjnej:

• Element pasujący do :nth-child(2 of .highlight) ma różowy kontur.
• Element pasujący do .highlight:nth-child(2) ma zielone obramowanie.

Pamiętaj, że S to lista selektorów, co oznacza, że akceptuje wiele selektorów rozdzielonych przecinkami. Na przykład :nth-child(4 of .highlight, .sale) wybiera czwarty element, który jest elementem .highlight lub .sale w zbiorze elementów równorzędnych.

W poniższej wersji demonstracyjnej element pasujący do :nth-child(4 of .highlight, .sale) ma pomarańczowy kontur.

Ponowne spojrzenie na wzór zebry

Klasycznym przykładem użycia kodu :nth-child() jest tworzenie tabeli w paski. Jest to technika wizualna, w której każdy wiersz tabeli ma inny kolor. Zwykle wygląda to tak:

tr:nth-child(even) {
  background-color: lightgrey;
}

W przypadku tabel statycznych to rozwiązanie działa dobrze, ale staje się problematyczne, gdy zaczynasz dynamicznie filtrować zawartość tabeli. Jeśli np. wiersz 2 zostanie ukryty, wiersze 1 i 3 będą widoczne i będą miały ten sam kolor tła.

Aby to naprawić, możemy skorzystać z funkcji :nth-child(An+B [of S]?), wykluczając ukryte wiersze z logiki An+B:

tr:nth-child(even of :not([hidden])) {
  background-color: lightgrey;
}

Całkiem fajnie, prawda?

Zdjęcie: Markus Spiske, Unsplash