:nth-of-typeSelektor pozwala wybrać jeden lub więcej elementów na podstawie ich kolejności źródłowego, według wzoru. 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 mamy nieuporządkowaną listę i chcemy „paskiem zebry” na przemian z elementami listy:
- First Item
- Second Item
- Third Item
- Fourth Item
- Fifth Item
Zamiast dodawać klasy do każdego elementu listy (np. .even& .odd), Możemy użyć :nth-of-type:
li ( background: slategrey; ) /* select alternating items starting with the second item */ li:nth-of-type(2n) ( background: lightslategrey; )Jak widać, :nth-of-typeprzyjmuje argument: może to być pojedyncza liczba całkowita, słowa kluczowe „parzyste” lub „nieparzyste” albo wzór, jak pokazano powyżej. 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 jak nawigacja po elementach w tablicy w JavaScript. Słowa kluczowe „parzyste” i „nieparzyste” są proste, ale formuła jest tworzona 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 powyższym przykładzie wybraliśmy co drugi element ze wzorem 2n, który działał, ponieważ za każdym razem, gdy element był sprawdzany, „n” zwiększane o jeden (2 × 0, 2 × 1, 2 × 2, 2 × 3 itd.). Jeśli kolejność elementu odpowiada wynikowi równania, zostanie on wybrany (2, 4, 6 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-of-typeselektorów:
Na szczęście nie zawsze musisz wykonywać obliczenia samodzielnie - istnieje kilka :nth-of-typetesterów i generatorów:
- Tester sztuczek CSS
- Tester Lei Verou
Użyteczne miejsca
:nth-of-typeiteruje przez elementy zaczynając od góry w kolejności źródła. Jedyna różnica między nią a:nth-last-of-typepolega na tym, że ta ostatnia iteruje przez elementy zaczynając od dołu kolejności źródłowej.:nth-of-typeSelektor jest bardzo podobny do:nth-child, ale z jedną różnicą krytycznego: to jest bardziej szczegółowy. W naszym przykładzie powyżej dałyby ten sam wynik, ponieważ iterujemy tylko polielementach, 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 pokazuje, że siła:nth-of-type-it jest skierowana na określony typ elementu w układzie w odniesieniu do podobnego rodzeństwa, a nie do całego rodzeństwa.
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| Pracuje | 3.2+ | Pracuje | 9.5+ | 9+ | Pracuje | Pracuje |
:nth-of-typezostał 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.