:nth-last-childSelektor 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-childzaznacza elementy zaczynające się od dołu kolejności źródłowej, a nie od góry.
Załóżmy, że mamy listę z nieznaną liczbą elementów 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-child:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-child(2) ( background: lightslategrey; )Jak widać, :nth-last-childprzyjmuje 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 jak nawigacja po elementach w tablicy w 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 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:
Na szczęście nie zawsze musisz wykonywać obliczenia samodzielnie - istnieje kilka :nth-last-childtesterów i generatorów:
- Tester sztuczek CSS
- Tester Lei Verou
Użyteczne miejsca
:nth-last-childiteruje przez elementy, zaczynając od dołu kolejności źródła. Jedyna różnica między nim a:nth-childpolega na tym, że ta ostatnia iteruje przez elementy zaczynając od góry kolejności źródłowej.:nth-last-childSelektor jest bardzo podobny do:nth-last-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 polielementach, 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 ujawnia moc:nth-last-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 |
|---|---|---|---|---|---|---|
| Pracuje | 3.2+ | Pracuje | 9.5+ | 9+ | Pracuje | Pracuje |
:nth-last-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.