Ostatni wiersz listy ma dostać dodatkowy odstęp, ale po dodaniu przycisku styl nagle obejmuje inny element. Selektor :last-child wskazuje ostatnie dziecko danego rodzica, choć o wyniku decyduje układ elementów w HTML, a nie ich wygląd na ekranie.
Ostatnie dziecko oznacza pozycję w strukturze HTML
:last-childpasuje do elementu, który jest ostatnim elementem potomnym swojego rodzica.- Inny typ elementu na końcu sprawi, że selektor taki jak
p:last-childnie zadziała. :last-of-typeszuka ostatniego elementu o danym typie, a nie ostatniego dziecka w ogóle.- Ukrycie elementu w CSS nie zmienia jego miejsca w strukturze dokumentu.
Selektor sprawdza ostatnią pozycję wśród rodzeństwa
Wyobraź sobie listę z trzema pozycjami, z których ostatnia nie powinna mieć dolnej kreski. Zapis li:last-child wybierze ostatni element li, jeśli jest on również ostatnim elementem wśród dzieci swojego rodzica.
.menu > li:last-child {
border-bottom: 0;
}Selektor złożony z .menu > i li:last-child ogranicza dopasowanie do bezpośrednich dzieci menu. To przydatne, gdy zagnieżdżone listy mają własne elementy końcowe. Definicję pseudo-klasy opisuje specyfikacja W3C Selectors Level 4.
Obcy element na końcu wyjaśnia, czemu styl nie działa
Dodaj do listy na końcu tekst z podpowiedzią, przycisk albo element dodany przez komponent. Wtedy ostatnim dzieckiem rodzica nie jest już li, więc reguła li:last-child nie pasuje do żadnej pozycji listy.
Jeśli „Kontakt” ma być ostatnią pozycją nawigacyjną, a notatka ma pozostać w tym samym kontenerze, samo :last-child nie opisuje już potrzebnej reguły. Możesz nadać pozycji klasę, osobno opakować notatkę albo zmienić selektor, jeśli zamierzonym kryterium jest typ elementu.
:last-of-type wybiera ostatni element danego rodzaju
Gdy po ostatnim akapicie pojawia się na przykład przycisk, użyj p:last-of-type, jeśli chcesz wyróżnić ostatni akapit. Ta pseudo-klasa pomija rodzeństwo innych typów, ale nadal rozróżnia typy znaczników, a nie klasy.
Pierwszy akapit.
Ostatni akapit.
article > p:last-of-type {
margin-bottom: 0;
}Jeśli kilka elementów w kontenerze to znaczniki div, ale każdy ma inną klasę, div:last-of-type wybierze ostatni div, nie ostatni element z wybraną klasą. Uważam, że właśnie to rozróżnienie najlepiej zapamiętać: :last-child liczy pozycję wśród rodzeństwa, a :last-of-type pozycję wśród znaczników tego samego typu.
Ukryty element nadal może być ostatnim dzieckiem
Reguła może wyglądać na niedziałającą, choć ostatni element nie jest widoczny. Jeśli dziecko ma display: none, znika z renderowania strony, ale nadal znajduje się w strukturze dokumentu, więc wcześniejszy element nie staje się przez to ostatnim dzieckiem.
| Sytuacja | Prawdopodobna przyczyna | Co zrobić |
|---|---|---|
Selektor p:last-child nie łapie akapitu |
Po akapicie znajduje się inny element, na przykład przycisk | Użyj p:last-of-type, jeśli chodzi o ostatni akapit |
| Element końcowy jest niewidoczny, ale zmienia dopasowanie | Ma display: none, lecz nadal istnieje w HTML |
Sprawdź strukturę DOM albo zmień warunek stylowania |
| Reguła obejmuje element z zagnieżdżonej listy | Selektor potomka, np. .menu li:last-child, trafia także w elementy głębiej w drzewie |
Dodaj selektor bezpośredniego dziecka: .menu > li:last-child |
Podobna pułapka dotyczy spacji i komentarzy w kodzie: tekst i komentarze nie są elementami rodzeństwa, które rozstrzygają dopasowanie tej pseudo-klasy. Gdy selektor zaskakuje, sprawdź w inspektorze przeglądarki, jakie elementy są bezpośrednimi dziećmi rodzica.
Gdy filtrujesz po klasie, użyj selektora z of
Może się zdarzyć, że ostatni element określonego typu lub klasy trzeba znaleźć mimo obecności dodatkowych elementów obok. Współczesny zapis :nth-last-child(1 of .item) liczy od końca tylko rodzeństwo pasujące do selektora .item, więc pozwala wskazać ostatni element tej klasy.
.item:nth-last-child(1 of .item) {
margin-bottom: 0;
}Ten zapis jest mniej oczywisty niż :last-child, a jego obsługę w docelowych przeglądarkach trzeba zweryfikować, jeśli projekt wspiera starsze środowiska. Gdy struktura komponentu jest pod Twoją kontrolą, prostsza klasa stanu albo osobny kontener bywa czytelniejszy niż selektor, który próbuje odtworzyć logikę aplikacji z samego układu DOM.
Najpierw sprawdź drzewo, potem poprawiaj CSS
Przy problemie z ostatnim elementem zacznij od wskazania jego rodzica i sprawdzenia bezpośrednich dzieci. Jeśli celem jest ostatnie dziecko bez względu na typ, wybierz :last-child; jeśli ostatni element danego znacznika, rozważ :last-of-type; jeśli ostatni element konkretnej klasy wśród rodzeństwa, sprawdź wariant of.
Taka kolejność pozwala odróżnić błąd selektora od nieoczekiwanej struktury DOM. Zamiast zwiększać specyficzność reguły na ślepo, popraw warunek tak, by dokładnie opisywał element, który ma otrzymać styl.
