: nth-last-of-type - CSS-Tricks

:nth-last-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. Działa tak samo, jak :nth-of-typezaznacza elementy zaczynające się od dołu kolejności źródłowej, a nie od góry.

Załóżmy, że mamy nieuporządkowaną listę i chcemy wyróżnić przedostatnią pozycję (w tym dokładnym przykładzie „Czwarty element”):



First Item
Second Item
Third Item
Fourth Item
Fifth Item

Zamiast robić coś takiego jak dodanie klasy do elementu listy (np. .highlight), Możemy użyć :nth-last-of-type:

li ( background: slategrey; ) /* select the second-last item */ li:nth-last-of-type(2) ( background: lightslategrey; )

Jak widać, :nth-last-of-typeprzyjmuje argument: może to być pojedyncza liczba całkowita, słowa kluczowe „parzyste” lub „nieparzyste” albo formuła. 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 w JavaScript. Słowa kluczowe „parzyste” i „nieparzyste” są proste (odpowiednio 2, 4, 6 itd. Lub 1, 3, 5 itd.). 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 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-last-of-typeselektorów:

Zobacz Pen CSS-Tricks:: nth-last-of-type autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.

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

Tester sztuczek CSS
Tester Lei Verou

Użyteczne miejsca

:nth-last-of-typeiteruje przez elementy, zaczynając od dołu kolejności źródła. Jedyna różnica między nią a :nth-of-typepolega na tym, że ta ostatnia iteruje przez elementy zaczynając od dołu kolejności źródłowej.
:nth-last-of-typeSelektor jest bardzo podobny do :nth-last-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 po lielementach, ale gdybyśmy iterowali po bardziej złożonej grupie rodzeństwa, :nth-last-childspróbowaliby dopasować wszystkie rodzeństwo, a nie tylko rodzeństwo tego samego typu elementu. To pokazuje, że siła :nth-last-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-last-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.