:last-childSelektor pozwala kierować ostatni element bezpośrednio wewnątrz pojemnika lub elementu. 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 treścią nadrzędną i siostrzaną.
Załóżmy, że mamy artykuł i chcemy zmniejszyć ostatni akapit, aby działał jako zakończenie treści (jak notatka redaktora):
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…
Zamiast używać klasy (np. .last), Możemy :last-childją wybrać:
p:last-child ( font-size: 0.75em; )Stosowanie :last-childjest bardzo podobne do, :last-of-typeale ma jedną zasadniczą różnicę: jest mniej szczegółowe. :last-childspróbuje dopasować tylko ostatnie dziecko elementu nadrzędnego, podczas gdy last-of-typedopasuje ostatnie wystąpienie określonego elementu, nawet jeśli nie jest on ostatni w kodzie HTML. W powyższym przykładzie wynik byłby taki sam, tylko dlatego, że ostatnie dziecko articlerównież jest ostatnim pelementem. To ujawnia siłę :last-child: może zidentyfikować element w odniesieniu do całego jego rodzeństwa, a nie tylko rodzeństwa tego samego typu.
Pełniejsza Poniższy przykład pokazuje zastosowanie :last-childoraz powiązane selektor pseudo dla klasy :first-child.
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| Każdy | 3.2+ | Każdy | 9.5+ | 9+ | Każdy | Każdy |
: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.