KWALIFIKACJA INF3 - PAŹDZIERNIK 2016

PYTANIE NR 7.
W języku CSS zdefiniowano formatowanie

p > i {color: blue}

Oznacza to, że kolorem niebieskim zostanie zapisany

A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
p > i { color: blue; }

Selektor p > i wybiera tylko elementy i będące bezpośrednimi dziećmi elementu p. Właściwość color ustawia kolor tekstu tych elementów na niebieski, więc dotyczy pochylonego (kursywą) fragmentu w paragrafie, a nie całego akapitu ani nagłówków.

Pełne wyjaśnienie:

Reguła CSS p > i { color: blue; } składa się z selektora oraz deklaracji stylu. Deklaracja color: blue zmienia kolor tekstu elementu, który został dopasowany przez selektor.

Kluczowe znaczenie ma selektor p > i:

  • p oznacza element akapitu.
  • > to kombinator dziecka (child combinator) – wymaga, aby drugi element był bezpośrednim dzieckiem pierwszego w drzewie DOM.
  • i oznacza element i, który domyślnie bywa renderowany jako tekst pochylony.

W efekcie na niebiesko zostanie ustawiony tekst tylko tych elementów i, które są wstawione bezpośrednio wewnątrz p, np.:

<p>To jest <i>kursywa</i>.</p>

Dlaczego pozostałe odpowiedzi nie pasują?

  • "cały tekst paragrafu…" jest błędne, bo selektor nie wskazuje elementu p, tylko element i wewnątrz p.
  • "cały tekst nagłówków…" jest błędne, bo selektor zaczyna się od p, więc nie dotyczy nagłówków typu h1h6.
  • "pogrubiony tekst paragrafu" jest błędne, bo pogrubienie zwykle wiąże się z b/strong, a reguła dotyczy i i ustawia kolor, nie grubość fontu.

Wskazówka egzaminacyjna: gdy widzisz znak >, zawsze sprawdź relację "rodzic–dziecko bezpośrednie". To częsty punkt pułapek w zadaniach z selektorów.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Symbol > w selektorze CSS oznacza kombinator dziecka. Wybiera elementy, które są bezpośrednimi dziećmi wskazanego rodzica w DOM, np. p > i pasuje tylko do <i> będących bezpośrednio w <p>.
Selektor p > i dopasowuje elementy <i>, które znajdują się bezpośrednio wewnątrz elementu <p>. Jeśli <i> jest zagnieżdżone głębiej (np. w <span>), to reguła z > nie zadziała.
p i (spacja) wybiera wszystkie elementy <i> będące potomkami <p> na dowolnym poziomie zagnieżdżenia. p > i wybiera tylko te <i>, które są bezpośrednimi dziećmi <p>, więc zakres działania jest węższy.
Ponieważ selektor nie wskazuje elementu <p>, tylko elementy <i> znajdujące się w nim. Właściwość color zostanie zastosowana wyłącznie do dopasowanych elementów, a reszta tekstu paragrafu zachowa swój dotychczasowy kolor.
W praktyce przeglądarki często renderują <i> jako tekst pochylony, ale semantycznie oznacza on fragment "w innym głosie" (np. termin, nazwa, cytat). Wygląd może zostać zmieniony CSS, więc na egzaminie warto rozumieć zarówno domyślny wygląd, jak i możliwość stylowania.
Nie zadziała, gdy <i> nie jest bezpośrednim dzieckiem <p>, np. <p><span><i>tekst</i></span></p>. W takim przypadku pasowałby selektor potomka p i, ale nie selektor z >.
W narzędziach deweloperskich wybierz element w zakładce Elements, a następnie sprawdź panel Styles. Możesz też użyć wyszukiwarki selektorów (np. Ctrl+F) i wpisać p > i, aby zobaczyć, które elementy zostaną podświetlone.
W CSS właściwość color dotyczy koloru tekstu (foreground). Kolor tła ustawia się przez background-color. To częsta pomyłka na testach, bo obie właściwości wpływają na "kolor", ale dotyczą różnych warstw prezentacji.
Najczęściej myli się > ze spacją (potomek), przez co zakłada się działanie reguły na elementy zagnieżdżone głębiej. Drugi błąd to ignorowanie pierwszej części selektora (tu: p) i przenoszenie stylu na inne miejsca dokumentu, np. nagłówki.
Najlepiej ćwiczyć na krótkich przykładach DOM: rysuj drzewo elementów i sprawdzaj, co wybiera selektor (tag, klasa, relacja). Utrwal kombinatory: spacja (potomek), > (dziecko), + (sąsiad), ~ (rodzeństwo). Testuj je w DevTools.
info

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

Według specjalistów z branży: "p &gt; i { color: blue; }Selektor p &gt; i wybiera tylko elementy i będące bezpośrednimi dziećmi elementu p."

Źródła:

  • MDN Web Docs: "CSS selectors" (combinators, child combinator >), https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors (dostęp: 2026-03-02)
  • MDN Web Docs: "Child combinator" (>): https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator (dostęp: 2026-03-02)
  • W3C Selectors Level 3 Specification, sekcja "Child combinators", https://www.w3.org/TR/selectors-3/#child-combinators (dostęp: 2026-03-02)

Materiały:

  • Dokumentacja MDN o selektorach CSS i kombinatorach
  • Specyfikacja W3C Selectors (poziom 3/4) – sekcja o child combinator
  • Ćwiczenia: budowa prostego DOM i testowanie selektorów w DevTools przeglądarki

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego