Pseudoklasa CSS :nth-last-child() to selektor dopasowujący elementy HTML będące kolejnym dzieckiem swojego rodzica, innymi słowy należące do pewnej grupy (typu) posiadających ten sam element nadrzędny. Jak sama nazwa mówi będziemy w tym przypadku zaczynać od dołu grupy czyli ostatniego dziecka.
Selektor ten działa na podobnej zasadzie jak :nth-child() tylko od drugiej strony.
Jak deklarujemy :nth-last-child()?
Wywołanie :nth-last-child() nie jest specjalnie trudne i wygląda następująco:
:nth-last-child(numer) {
właściwości CSS;
}Oczywiście by użyć ten selektor na stronie internetowej musimy go odpowiednio przygotować. Jak zwykle by lepiej zrozumieć jak coś działa warto to zrobić na przykładach:
Parzysty, nieparzysty wiersz / element – odd, even
Zaczniemy może od czegoś prostego. Czyli zaznaczania parzystych i nieparzystych elementów grupy. Dokładnie taki sam kod użyłam w przykładzie :nth-child() by pokazać różnicę w działaniu tutaj więc użyję :nth-last-child()
li:nth-last-child(odd){
background: lightyellow;
}
li:nth-last-child(even){
background: lightgreen;
}- Nieparzysty element
- Parzysty element
- Nieparzysty element
- Parzysty element
- Nieparzysty element
- Parzysty element
W tym wypadku idziemy od dołu nie od góry. Ostatni element jest wiec nieparzysty czyli ODD a przed ostatni parzysty EVEN. Dlatego też kolory w obu przykładach będą na przemiennie.
Zaznaczanie grup elementów
To jest kolejny analogiczny przykład do omawianego wcześniej selektora:
See the Pen :nth-last-child by Aura (@Julka85) on CodePen.