W kodzie CSS zastosowano formatowanie elementu listy, a żadnych innych reguł CSS nie zdefiniowano. To formatowanie spowoduje, że
li:last-child { color: Maroon; }
:nth-child(even), a nie :last-child.:last-child wybiera ostatnie dziecko rodzica, więc kolor dostaje ostatni punkt każdej listy.li bez pseudoklasy. Tutaj kolor dostaje tylko ostatni.class.Pseudoklasa :last-child wybiera element, który jest ostatnim dzieckiem swojego rodzica. Selektor li:last-child trafia więc w ostatni punkt każdej listy <ul> i <ol> na stronie. Pozostałe punkty zostają w domyślnym kolorze.
Rodzina tych pseudoklas jest często na egzaminie: :first-child wybiera pierwszy element, :nth-child(2) drugi, :nth-child(odd) i :nth-child(even) co drugi, a :hover element pod kursorem. Praktyczne zastosowanie: li:last-child { border-bottom: none; } usuwa linię pod ostatnią pozycją menu. Pseudoklasę poprzedza jeden dwukropek, dwa oznaczają pseudoelement, np. ::first-letter.
Pseudoklasy działają bez zmian w kodzie HTML.
Wybór błędnej odpowiedzi bierze się zwykle z mylenia składni selektorów. Klasę zapisuje się z kropką: li.last-child wybierałby elementy z atrybutem class="last-child". Dwukropek oznacza pseudoklasę, czyli stan albo położenie elementu, a nie nadaną w HTML klasę.
Kolor dla wszystkich punktów listy dałaby sama reguła li { color: Maroon; }. Dopisek :last-child zawęża wybór do jednego elementu w każdej liście.
Co drugi element wybiera :nth-child(2n) albo :nth-child(even). Tak koloruje się na przemian wiersze tabeli. :last-child nie liczy co drugi, tylko sprawdza, czy za elementem jest jeszcze jakieś rodzeństwo.
Efekt łatwo sprawdzić w narzędziach deweloperskich przeglądarki (F12): po wskazaniu ostatniego punktu listy panel Styles pokaże regułę li:last-child, a przy pozostałych punktach jej nie będzie. Tak samo sprawdzisz każdą inną pseudoklasę.