:last-child
Pasuje do elementu, który jest ostatnim dzieckiem swojego rodzica.
Przykład
#.crumbs li:not(:last-child)::after {
content: "/";
margin: 0 8px;
color: #71717a;
}
.crumbs li:last-child {
color: #fff;
font-weight: 600;
}<ol class="crumbs" style="display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; color: #a1a1aa;">
<li>Dokumentacja</li>
<li>CSS</li>
<li>:last-child</li>
</ol>Definicja i zastosowanie
#Pseudoklasa :last-child to lustrzane odbicie :first-child: wybiera element stojący na samym końcu rodzica. Typowy przykład to usunięcie dolnego marginesu ostatniego akapitu w karcie, żeby odstęp od krawędzi był taki sam z każdej strony.
Obowiązuje ta sama pułapka co przy :first-child. Selektor p:last-child zadziała tylko wtedy, gdy akapit jest naprawdę ostatnim dzieckiem. Jeśli po nim stoi przycisk albo stopka, nic nie zostanie wybrane. Wtedy pomaga :last-of-type.
Pseudoklasa działa na bieżąco. Gdy skrypt dopisze nowy element na końcu listy, poprzedni ostatni przestaje pasować, a styl przechodzi na nowy element bez żadnej zmiany w CSS.
Składnia
#selektor:last-child { właściwość: wartość; }Przykładowe selektory
#- Ostatni punkt listy, bo zamyka swojego rodzica.
- Nic się nie podświetla: ostatnim dzieckiem artykułu jest przycisk.
- Ostatni akapit spośród akapitów, nawet jeśli za nim stoi inny element.
- Wszystkie punkty oprócz ostatniego, np. do separatorów wstawianych między elementami.
Przykładowe selektory w praktyce
#li:last-child
li:last-child { background: #7c3aed; color: #fff; }p:last-child
p:last-child { background: #7c3aed; color: #fff; }p:last-of-type
p:last-of-type { background: #7c3aed; color: #fff; }li:not(:last-child)
li:not(:last-child) { background: #7c3aed; color: #fff; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- W kartach i okienkach zeruj dolny margines ostatniego dziecka (
.card > :last-child { margin-bottom: 0 }). Odstęp od dolnej krawędzi będzie równy górnemu. - Separatory między elementami najprościej dodać przez
li:not(:last-child)::after. Ostatni element nie dostanie zbędnego znaku. - Gdy na końcu rodzica mogą pojawiać się różne elementy,
:last-of-typejest odporniejsze niż:last-child.
Powiązane hasła
#- :first-childPasuje do elementu, który jest pierwszym dzieckiem swojego rodzica.
- :nth-child()Wybiera elementy według pozycji wśród rodzeństwa: co drugi, co trzeci, pierwsze trzy albo wszystkie od siódmego.
- :nth-of-type()Wybiera elementy według pozycji wśród rodzeństwa z tym samym znacznikiem, na przykład co drugi obrazek albo trzeci akapit.
- :not()Wybiera elementy, które nie pasują do podanego selektora ani do żadnego z listy.
- ::afterTworzy wirtualny element na końcu zawartości elementu. Idealny do strzałek, znaczków, podkreśleń i nakładek.
Widzisz błąd albo brakuje przykładu? Napisz do nas.