Selektor CSS :nth-last-child()
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.
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:
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;
}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.
To jest kolejny analogiczny przykład do omawianego wcześniej selektora:
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…