: nth-child - CSS-Tricks

Anonim

:nth-childSelektor pozwala wybrać jeden lub więcej elementów na podstawie ich kolejności źródłowego, według wzoru.

/* Select the first list item */ li:nth-child(1) ( ) /* Select the 5th list item */ li:nth-child(5) ( ) /* Select every other list item starting with first */ li:nth-child(odd) ( ) /* Select every 3rd list item starting with first */ li:nth-child(3n - 2) ( ) /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) ( ) /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3n) ( )

Jest zdefiniowana w specyfikacji CSS Selectors Level 3 jako „strukturalna pseudoklasa”, co oznacza, że ​​jest używana do stylizowania treści na podstawie jej relacji z elementami nadrzędnymi i rodzeńskimi.

Załóżmy, że budujemy siatkę CSS i chcemy usunąć margines na co czwartym module siatki. Oto ten kod HTML:

 One Two Three Four Five

Zamiast dodawać klasę do co czwartej pozycji (np. .last), Możemy użyć :nth-child:

.module:nth-child(4n) ( margin-right: 0; )

:nth-childSelektor bierze argumentu może być pojedynczą liczbą całkowitą, to słowa kluczowe even, oddlub wzór. Jeśli podano liczbę całkowitą, wybrany jest tylko jeden element - ale słowa kluczowe lub formuła będą iterować przez wszystkie elementy potomne elementu nadrzędnego i wybierać pasujące elementy - podobnie do nawigacji po elementach w tablicy JavaScript. Słowa kluczowe „parzyste” i „nieparzyste” są proste (odpowiednio 2, 4, 6 itd. Lub 1, 3, 5). Formuła jest konstruowana przy użyciu składni an+b, gdzie:

  • „A” jest liczbą całkowitą
  • „N” to dosłowna litera „n”
  • „+” Jest operatorem i może być „+” lub „-”
  • „B” jest liczbą całkowitą i jest wymagane, jeśli we wzorze znajduje się operator

Ważne jest, aby pamiętać, że ta formuła jest równaniem i przechodzi przez każdy element siostrzany, określając, który zostanie wybrany. Część „n” formuły, jeśli jest zawarta, reprezentuje zbiór rosnących dodatnich liczb całkowitych (podobnie jak w przypadku iteracji po tablicy). W naszym powyższym przykładzie wybraliśmy co czwarty element ze wzorem 4n, który działał, ponieważ za każdym razem, gdy element był sprawdzany, „n” wzrastało o jeden (4 × 0, 4 × 1, 4 × 2, 4 × 3 itd.). Jeśli kolejność elementu pasuje do wyniku równania, zostanie on wybrany (4, 8, 12 itd.). Aby uzyskać bardziej szczegółowe wyjaśnienie zastosowanej matematyki, przeczytaj ten artykuł.

Aby zilustrować więcej, oto kilka przykładów prawidłowych :nth-childselektorów:

Na szczęście nie zawsze musisz wykonywać obliczenia samodzielnie - istnieje kilka :nth-childtesterów i generatorów:

  • Tester sztuczek CSS
  • Tester Lei Verou

: nth-child (an + b z)

Istnieje mało znany filtr, do którego można dodać :nth-childzgodnie ze specyfikacją selektorów CSS: Możliwość wyboru :nth-childpodzbioru elementów za pomocą of formatu. Załóżmy, że masz listę o mieszanej zawartości: niektórzy mają zajęcia .video, inni klasę .picture, a Ty chcesz wybrać pierwsze 3 zdjęcia. Możesz to zrobić za pomocą filtra „z” w następujący sposób:

:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )

Zauważ, że różni się to od dołączania selektora bezpośrednio do :nth-childselektora:

.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )

Może to trochę zagmatwać, więc przykład może pomóc zilustrować różnicę:

Obsługa filtru „z” przez przeglądarkę jest bardzo ograniczona: w chwili pisania tego tekstu tylko Safari obsługiwała składnię. Aby sprawdzić stan swojej ulubionej przeglądarki, oto otwarte kwestie związane z :nth-child(an+b of s):

  • Firefox: obsługa nth-child (An + B z sel)
  • Chrome: Implement: nth-child (an + b z S)

Użyteczne miejsca

  • :nth-childiteruje przez elementy zaczynając od góry w kolejności źródła. Jedyna różnica między nią a :nth-last-childpolega na tym, że ta ostatnia iteruje przez elementy zaczynając od dołu kolejności źródłowej.
  • Składnia wyboru pierwszej nliczby elementów jest nieco sprzeczna z intuicją. Zaczynasz od -nplus dodatnia liczba elementów, które chcesz wybrać. Na przykład li:nth-child(-n+3)wybierze pierwsze 3 lielementy.
  • :nth-childSelektor jest bardzo podobny do :nth-of-type, ale z jedną różnicą krytyczny: jest mniej konkretne. W naszym przykładzie powyżej dałyby ten sam wynik, ponieważ iterujemy tylko po .moduleelementach, ale gdybyśmy iterowali po bardziej złożonej grupie rodzeństwa, :nth-childspróbowaliby dopasować wszystkie rodzeństwo, a nie tylko rodzeństwo tego samego typu elementu. To ujawnia moc :nth-child-it może wybrać dowolny element rodzeństwa w aranżacji, nie tylko elementy, które są określone przed dwukropkiem.

Wsparcie przeglądarki

Chrom Safari Firefox Opera TO ZNACZY Android iOS
Każdy 3.2+ Każdy 9.5+ 9+ Każdy Każdy

:nth-childzostał wprowadzony w module 3 selektorów CSS, co oznacza, że ​​starsze wersje przeglądarek go nie obsługują. Jednak obsługa nowoczesnych przeglądarek jest nienaganna, a nowe pseudoselektory są szeroko stosowane w środowiskach produkcyjnych. Jeśli potrzebujesz obsługi starszych przeglądarek, użyj wypełnienia polyfill dla IE lub użyj tych selektorów w sposób niekrytyczny - zalecane jest stopniowe ulepszanie.