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

Zanim zastosujesz logikę An+B, przefiltruj wstępnie zbiór elementów podrzędnych.

Bramus

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

Selektor pseudoklasy :nth-child() umożliwia wybieranie elementów w DOM według ich indeksu. Dzięki mikroskładance An+B możesz precyzyjnie wybierać elementy, które chcesz wybrać.

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

Możesz jednak wybrać więcej kreacji, jeśli pominiesz parametr A. Na przykład:

  • :nth-child(n+3): wybierz wszystkie dzieci od trzeciego, (3, 4, 5 itd.).
  • :nth-child(-n+5): wybierz każde dziecko przed piątym dniem zajęć (1, 2, 3, 4, 5).

Gdy połączysz kilka z tych opcji (:nth-child()), możesz wybrać zakresy elementów:

  • :nth-child(n+3):nth-child(-n+5): wybierz wszystkie dzieci od 3. do 5. (3, 4, 5).

Funkcja :nth-last-child() umożliwia wybranie podobnych ustawień, ale zamiast zacząć liczyć od początku, zaczynasz liczyć od końca.

Filtrowanie wstępne o składni of S

Nowość w selektorach arkusza CSS na poziomie 4 umożliwia opcjonalnie przekazywanie listy selektora do funkcji :nth-child() i :nth-last-child().

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

Jeśli określono of S, logika An+B jest stosowana tylko do elementów, które pasują do danej listy selektora S. Zasadniczo oznacza to, że możesz wstępnie odfiltrować elementy podrzędne, zanim An+B zadziała.

Obsługa przeglądarek

  • 111
  • 111
  • 113
  • 9

Przykłady

Na przykład :nth-child(2 of .highlight) wybiera drugi pasujący element, który ma klasę .highlight. Inaczej: spośród wszystkich dzieci z klasą .highlight wybierz drugą.

W przeciwieństwie do elementu .highlight:nth-child(2), który wybiera element mający klasę .highlight oraz drugi element podrzędny.

Możesz zobaczyć tę różnicę w poniższym przykładzie:

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

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

W poniższym przykładzie element pasujący do :nth-child(4 of .highlight, .sale) ma pomarańczowy kontur.

Zebra, nowa odsłona

Klasycznym przykładem, w którym jest używany element :nth-child(), jest tworzenie tabeli w paski zebry. Jest to technika wizualna, w której każdy wiersz tabeli zmienia się kolorem. Zazwyczaj procedura wygląda tak:

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

Jest to rozwiązanie w przypadku tabel statycznych, ale po rozpoczęciu dynamicznego filtrowania zawartości tabeli problem staje się problematyczny. Jeśli na przykład wiersz drugi zostanie ukryty, będzie on widoczny w wierszu 1 i 3, z których każdy będzie mieć ten sam kolor tła.

Aby rozwiązać ten problem, możemy wykorzystać funkcję :nth-child(An+B [of S]?), wykluczając ukryte wiersze z logiki An+B:

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

Trochę słodko, prawda?

Zdjęcie: Markus Spiske, Unsplash