W CSS o tym, które elementy dostaną dany styl, decyduje selektor. Jeśli efekt na liście polega na tym, że co drugi element <li> ma niebieskie tło, potrzebujesz selektora zależnego od pozycji elementu wśród rodzeństwa.
Do tego służy pseudoklasa strukturalna :nth-child(). Zapis li:nth-child(even) oznacza: "wybierz te elementy <li>, które są parzystym dzieckiem swojego rodzica (tu: <ul>)". Następnie deklaracja background-color: DodgerBlue; ustawia kolor tła dla wybranych elementów.
Dlaczego pozostałe odpowiedzi są błędne?
- ul li:active – :active działa tylko w momencie aktywacji elementu (np. podczas kliknięcia i przytrzymania). To efekt chwilowy, a nie stałe "pasiasto" ustawione według kolejności.
- ul li:nth-child(odd) – to również selektor strukturalny, ale wybiera elementy nieparzyste (1., 3., 5. ...). Jeśli na ilustracji zaznaczone są parzyste pozycje, ta opcja nie pasuje.
- ul li:hover – :hover działa przy najechaniu kursorem. Taki efekt dotyczy zwykle jednego elementu naraz (tego, na którym jest kursor), a nie automatycznie co drugiego elementu bez interakcji.
Wskazówka egzaminacyjna: gdy widzisz naprzemienne tła (tzw. zebra), w pierwszej kolejności sprawdź :nth-child(even/odd), a gdy efekt pojawia się dopiero po ruchu myszą lub kliknięciu – wtedy rozważ :hover lub :active.
