Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Wskaż styl CSS za pomocą którego został uzyskany przedstawiony efekt.
|
Odpowiedzi
Informacja zwrotna
Dokładnie tak, poprawna odpowiedź to 'ul li:nth-child(even) { background-color: DodgerBlue; }'. Użycie selektora :nth-child(even) pozwala na zastosowanie stylu CSS do każdego parzystego elementu listy, co można zaobserwować na załączonym obrazku - każdy drugi (parzysty) element ma niebieskie tło. Jest to praktyczne rozwiązanie stosowane m.in. w celu poprawy czytelności długich list danych, gdzie koloryzmowanie na przemian pozwala na łatwiejsze zlokalizowanie poszczególnych elementów. Pamiętaj, że CSS oferuje wiele innych pseudoklas pozwalających na zastosowanie różnych efektów w zależności od stanu lub położenia elementu na stronie. Przy wykorzystaniu pseudoklas CSS warto odwoływać się do standardów i dobrych praktyk branżowych, takich jak unikanie nadmiernego zagnieżdżania selektorów, co może utrudniać czytelność i utrzymanie kodu.
Wybrane przez Ciebie odpowiedzi są nieprawidłowe. Zacznijmy od selektora CSS 'ul li:active { background-color: DodgerBlue; }' - aktywny stan elementu to moment, kiedy jest on aktualnie klikany, co nie pasuje do obserwowanego efektu. Następnie 'ul li:nth-child(odd) { background-color: DodgerBlue; }' - ten selektor odnosi się do nieparzystych elementów listy, podczas gdy na obrazku parzyste elementy mają niebieskie tło. Na koniec 'ul li:hover { background-color: DodgerBlue; }' - pseudoklasa :hover odnosi się do stanu, kiedy kursor myszy jest nad elementem, co również nie jest zgodne z efektem na obrazku. Wybór nieodpowiedniej pseudoklasy sugeruje, że nie zrozumiałeś do końca ich zastosowania w CSS. Jest to typowy błąd, który można naprawić przez dokładniejsze zapoznanie się z tym aspektem języka CSS, konkretnie z różnymi pseudoklasami i ich zastosowaniem.