Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA PGF4 - WRZESIEŃ 2014


PYTANIE NR 30.
Co oznacza następująca deklaracja kodu CSS:

li span {font-size: 10pt; color:green;} ?

A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Selektor li span wybiera wszystkie elementy <span> będące potomkami elementu <li> (na dowolnym poziomie zagnieżdżenia). Dlatego tylko tekst wewnątrz takich <span> otrzyma font-size: 10pt oraz color: green, a nie całe <li> ani wszystkie <span> na stronie.

Pełne wyjaśnienie:

Reguła CSS ma postać: li span { font-size: 10pt; color: green; }. Kluczowy jest tutaj selektor li span (z odstępem). Odstęp w selektorze oznacza relację potomka (tzw. descendant selector): przeglądarka dopasuje każdy element <span>, który znajduje się wewnątrz elementu <li> w drzewie HTML, nawet jeśli między nimi są inne znaczniki.

Skutek działania deklaracji jest więc następujący:

  • Zmieniony zostanie tylko wygląd dopasowanych elementów <span> (bo to one są wskazane jako drugi człon selektora).
  • Właściwość font-size: 10pt ustawi rozmiar pisma na 10 punktów dla tekstu w tych <span>.
  • Właściwość color: green ustawi kolor tekstu na zielony w tych <span>.

Dlaczego pozostałe odpowiedzi są niepoprawne?

  • Stwierdzenie, że styl dotyczy <li> oraz <span> jednocześnie, wynika z pomylenia selektora potomka z inną konstrukcją (np. grupowaniem selektorów przecinkiem). Gdyby chodziło o oba elementy niezależnie, zapis wyglądałby inaczej.
  • Stwierdzenie, że "wszystkie <span>" będą miały taki styl, pomija pierwszy człon selektora (li) i warunek kontekstu. Reguła nie jest globalna dla <span> w całym dokumencie.
  • Stwierdzenie, że chodzi o <li> znajdujące się wewnątrz <span>, odwraca relację zagnieżdżenia. Selekcja zawsze dotyczy elementu po prawej stronie (tu: <span>), a lewa strona określa kontekst (tu: wewnątrz <li>).

Wskazówka egzaminacyjna: jeśli w selektorze widzisz zapis typu A B, czytaj go jako "element B znajdujący się wewnątrz A".

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co oznacza selektor CSS "li span" w praktyce?
To selektor potomka: wybiera każdy element <span>, który znajduje się wewnątrz elementu <li> (nawet pośrednio, przez inne znaczniki). Styl nie dotyczy wszystkich <span> na stronie, tylko tych w kontekście listy.
Jakie elementy obejmie reguła "li span { … }" w HTML?
Obejmie tylko te <span>, które są potomkami <li> w drzewie DOM. Jeśli <span> jest poza listą lub poza <li>, reguła go nie zmieni. Liczy się zagnieżdżenie, a nie samo wystąpienie tagu.
Dlaczego w selektorze jest spacja między "li" a "span"?
Spacja oznacza relację potomka. To sygnał: "wybierz span znajdujący się wewnątrz li". Gdyby spacji nie było, selektor znaczyłby coś innego (np. inny typ dopasowania), więc ten znak ma kluczowe znaczenie.
Czy ta reguła ustawia styl także dla całego elementu <li>?
Nie. W selektorze po prawej stronie jest span, więc styl jest nadawany elementom <span>. Element <li> może wyglądać inaczej tylko wtedy, gdy ma własne reguły lub gdy pewne właściwości są dziedziczone, ale tutaj wskazany jest konkretnie <span>.
Co dokładnie zmieniają właściwości font-size i color?
font-size ustala rozmiar czcionki (tu: 10pt), a color ustala kolor tekstu (tu: green). Obie właściwości wpłyną na czytelność i hierarchię informacji w projekcie, np. w listach parametrów, podpisach lub drobnych dopiskach.
Jak odróżnić selektor potomka od selektora grupy w CSS?
Selektor potomka ma spację (np. li span). Selektor grupy używa przecinka (np. li, span) i wtedy styl dotyczy dwóch niezależnych typów elementów. To jedna z najczęstszych pułapek na testach.
Kiedy stosuje się stylowanie <span> wewnątrz <li> w projektach multimedialnych?
Gdy chcesz wyróżnić tylko fragment treści w punkcie listy, np. cenę, skrót, datę, nazwę pliku lub parametr techniczny. Dzięki selektorowi kontekstowemu nie psujesz wyglądu <span> użytych w innych częściach strony (np. w nagłówkach lub stopce).
Jakie błędy najczęściej robi się przy czytaniu selektorów typu "A B"?
Najczęściej: (1) uznanie, że styl dotyczy zarówno A, jak i B; (2) pominięcie A i założenie, że B jest globalne; (3) odwrócenie relacji i czytanie "A w B". Warto pamiętać: wybierany jest element po prawej, lewa strona to kontekst.
Czy "li span" działa także dla <span> zagnieżdżonego głęboko w <li>?
Tak. Selektor potomka dopasowuje elementy na dowolnym poziomie zagnieżdżenia: <li> … <div> … <span> też spełnia warunek. Gdyby chodziło tylko o dziecko bezpośrednie, użyto by innego zapisu selektora.
Jak na egzaminie szybko sprawdzić sens reguły CSS bez uruchamiania kodu?
Rozbij selektor na dwa człony i przeczytaj go od prawej: "styluję <span>". Potem dodaj warunek z lewej: "tylko te <span>, które są w <li>". Na końcu odczytaj właściwości: rozmiar 10pt i kolor zielony.
info

Około 55% zdających odpowiada poprawnie na to pytanie. średnie

Eksperci podkreślają: "Selektor li span wybiera wszystkie elementy &lt;span&gt; będące potomkami elementu &lt;li&gt; (na dowolnym poziomie zagnieżdżenia)."

Źródła:

  • MDN Web Docs: CSS Selectors — Descendant combinator, https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator - accessed 2026-02-18
  • MDN Web Docs: font-size, https://developer.mozilla.org/en-US/docs/Web/CSS/font-size - accessed 2026-02-18
  • MDN Web Docs: color, https://developer.mozilla.org/en-US/docs/Web/CSS/color - accessed 2026-02-18

Materiały:

  • Dokumentacja MDN: selektory CSS (część o selektorach potomka)
  • Dokumentacja MDN: właściwości font-size i color
  • Ćwiczenia: budowa prostego HTML z listą &lt;ul&gt;/&lt;li&gt; i zagnieżdżonymi &lt;span&gt; oraz testowanie selektorów
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego