Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - TEST WIEDZY NR 1



PYTANIE NR 11.
Rozważ następujący fragment kodu CSS: 
    p:first-child {
        color: green;
    }
Określ, które elementy zostaną stylizowane przez ten kod.
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Pseudoklasa :first-child dopasowuje element, który jest pierwszym dzieckiem swojego rodzica. Zapis p:first-child oznacza więc: "ustaw kolor zielony dla tych elementów p, które są pierwszym dzieckiem w danym elemencie nadrzędnym". Nie chodzi o pierwszy akapit na całej stronie ani o dzieci paragrafu.

Pełne wyjaśnienie:

Selektor p:first-child składa się z dwóch części: selektora typu p oraz pseudoklasy strukturalnej :first-child.

Pseudoklasa :first-child wybiera element, który jest pierwszym dzieckiem swojego rodzica (czyli wśród wszystkich bezpośrednich dzieci danego rodzica znajduje się na pierwszej pozycji w drzewie DOM). Połączenie tego z p zawęża wynik: styl otrzymają tylko te elementy p, które spełniają warunek "pierwszego dziecka".

Dlatego poprawne jest stwierdzenie: "Pierwszy paragraf w każdym elemencie rodzica", rozumiane jako: "każdy element p, który jest pierwszym dzieckiem swojego rodzica, będzie zielony". Jeśli w jakimś kontenerze pierwszym dzieckiem jest np. nagłówek, obrazek albo inny element, to znajdujący się później paragraf (nawet jeśli jest pierwszym paragrafem) nie zostanie dopasowany.

Dlaczego pozostałe odpowiedzi są błędne?

  • "Pierwszy paragraf na stronie." – selektor nie działa globalnie dla całego dokumentu. Warunek jest sprawdzany osobno dla każdego rodzica w DOM.
  • "Pierwsze dziecko każdego paragrafu." – selektor nie wybiera dzieci elementu p; wybiera sam element p, jeśli to on jest pierwszym dzieckiem swojego rodzica.
  • "Wszystkie paragrafy na stronie." – to odpowiadałoby selektorowi p bez pseudoklasy. Tutaj dodatkowy warunek mocno ogranicza dopasowanie.

Wskazówka egzaminacyjna: zawsze czytaj selektor od prawej do lewej i sprawdzaj, co jest elementem dopasowywanym (tu: p) oraz jaki warunek struktury DOM narzuca pseudoklasa (tu: pierwsze dziecko rodzica).

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co oznacza pseudoklasa :first-child w CSS?
:first-child oznacza element, który jest pierwszym dzieckiem swojego rodzica w drzewie DOM. Nie chodzi o "pierwszy element tego typu", tylko o pierwszy element w ogóle wśród rodzeństwa (dzieci tego samego rodzica).
Jak działa selektor p:first-child i co dokładnie wybiera?
Selektor p:first-child wybiera tylko te elementy p, które są pierwszym dzieckiem swojego rodzica. Jeśli przed paragrafem stoi np. nagłówek lub obrazek, paragraf nie zostanie dopasowany, nawet gdy jest "pierwszym paragrafem".
Dlaczego p:first-child to nie to samo co p:first-of-type?
p:first-child wymaga, aby p było pierwszym dzieckiem rodzica (bez względu na typ). p:first-of-type wymaga, aby p było pierwszym elementem typu p wśród rodzeństwa. To częsty haczyk w zadaniach egzaminacyjnych.
Kiedy p:first-child nie zadziała mimo że widzę pierwszy akapit w sekcji?
Nie zadziała, jeśli ten "pierwszy akapit" nie jest pierwszym dzieckiem rodzica, np. gdy przed nim znajduje się h1, img, komentarz jako węzeł, albo inny element. Warunek dotyczy pozycji w DOM, nie tego, co wizualnie wydaje się pierwsze.
Jak sprawdzić w DevTools, czy element jest first-child?
W narzędziach deweloperskich zaznacz element i zobacz jego pozycję w panelu DOM: sprawdź, czy jest pierwszym elementem wśród dzieci rodzica. Możesz też testowo dodać regułę z obramowaniem dla :first-child i obserwować, które elementy się wyróżnią.
Czy selektor p:first-child wybiera pierwszy paragraf na całej stronie?
Nie. Działa lokalnie w obrębie każdego rodzica. Może więc dopasować wiele elementów p w jednym dokumencie, o ile każdy z nich jest pierwszym dzieckiem swojego własnego rodzica (np. w wielu sekcjach, artykułach lub kartach UI).
Jakie są typowe błędy na egzaminie związane z :first-child?
Najczęściej myli się "pierwsze dziecko" z "pierwszym elementem danego typu" oraz interpretuje selektor globalnie ("pierwszy na stronie"). Drugi błąd to odwrócenie relacji: uznanie, że chodzi o dzieci paragrafu, a nie o sam paragraf jako pierwsze dziecko rodzica.
Jak napisać CSS, aby stylować pierwszy paragraf w sekcji niezależnie od nagłówka?
Zwykle używa się p:first-of-type, bo wybiera pierwszy element typu p w danym rodzicu, nawet jeśli wcześniej jest nagłówek. To często lepiej odpowiada intencji "pierwszy paragraf", gdy w sekcji są też inne elementy.
Czy :first-child bierze pod uwagę węzły tekstowe i komentarze HTML?
W praktyce w selektorach CSS liczą się elementy (węzły typu element). Komentarze nie są elementami. Kluczowe jest to, czy przed rozpatrywanym elementem znajduje się inny element jako dziecko tego samego rodzica. W razie wątpliwości zawsze sprawdź strukturę DOM.
Jak przygotować się do pytań o selektory CSS na INF.3?
Ćwicz na przykładach DOM: twórz małe struktury HTML i testuj selektory (:first-child, :first-of-type, :nth-child). Ucz się przewidywać dopasowanie bez uruchamiania kodu, a potem weryfikuj w DevTools — to najlepszy trening pod zadania testowe.
info

Około 52% zdających odpowiada poprawnie na to pytanie. trudne

Według specjalistów z branży: "Pseudoklasa :first-child dopasowuje element, który jest pierwszym dzieckiem swojego rodzica."

Źródła:

  • MDN Web Docs: ":first-child" — https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child (dostęp: 2026-03-03)
  • MDN Web Docs: "Pseudo-classes" — https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes (dostęp: 2026-03-03)
  • W3C: "Selectors Level 3" (sekcja o :first-child) — https://www.w3.org/TR/selectors-3/ (dostęp: 2026-03-03)

Materiały:

  • Dokumentacja MDN Web Docs: selektory CSS i pseudoklasy
  • Ćwiczenia z analizą drzewa DOM w narzędziach deweloperskich przeglądarki
  • Specyfikacja Selectors Level 3/4 (sekcje o pseudoklasach strukturalnych)
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego