KWALIFIKACJA INF3 - CZERWIEC 2018

PYTANIE NR 9.
Przedstawiono efekt formatowania CSS oraz kod HTML. Jak należy zdefiniować styl, aby osiągnąć takie formatowanie?
Ilustracja przedstawia efekt formatowania CSS w kontekście kodu HTML.
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Pseudoelement ::first-line służy do stylowania wyłącznie pierwszej linii tekstu w elemencie blokowym (np. w akapicie). Dlatego poprawna jest reguła "p::first-line …". Selektory z # i . dotyczą odpowiednio id i klasy całego elementu, a nie samej pierwszej linii.

Pełne wyjaśnienie:

Pytanie dotyczy dobrania selektora CSS tak, aby sformatować tylko pierwszą linię tekstu w akapicie. Do tego celu CSS przewiduje pseudoelement ::first-line, który "wydziela" pierwszą linię renderowanego tekstu i pozwala zastosować do niej wybrane właściwości (np. kolor, rozmiar pisma).

Dlatego poprawny zapis to: p::first-line { font-size: 200%; color: brown; } — wskazuje on element p oraz ogranicza działanie stylu do pierwszej linii.

Pozostałe odpowiedzi są błędne, bo nie odnoszą się do pseudoelementu pierwszej linii:

  • "#first-line …" to selektor identyfikatora. Zadziałałby na element z atrybutem id="first-line", a nie na pierwszą linię tekstu.
  • ".first-line …" to selektor klasy. Ostylowałby całe elementy z klasą first-line, a nie fragment wiersza wynikający z łamania linii.
  • "p.first-line …" to selektor elementu p z klasą first-line. Nadal dotyczy całego akapitu (całego elementu), nie tylko jego pierwszej linii.

Wskazówka egzaminacyjna: gdy w treści jest mowa o "pierwszej literze" lub "pierwszej linii", zwykle szuka się pseudoelementów (np. ::first-letter, ::first-line), a nie klas czy identyfikatorów.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Pseudoelement ::first-line pozwala stylować wyłącznie pierwszą linię tekstu wewnątrz elementu blokowego (np. akapitu). Działa na wynik renderowania, czyli na to, jak tekst łamie się w wiersze w przeglądarce, bez zmieniania kodu HTML.
Użyj selektora elementu oraz pseudoelementu: p::first-line { ... }. Dzięki temu styl zostanie zastosowany tylko do pierwszej linii w elemencie p, a reszta tekstu zachowa standardowe formatowanie lub inne reguły CSS.
Znak # w CSS oznacza selektor identyfikatora (id), czyli elementu z atrybutem id. Taki selektor nie ma związku z łamaniem tekstu na linie. Do pierwszej linii służy pseudoelement ::first-line.
Nie. Zapis z kropką .first-line odnosi się do klasy przypisanej w HTML i obejmuje cały element z tą klasą. Pseudoelement ::first-line wybiera fragment tekstu (pierwszy wiersz) wynikający z renderowania w przeglądarce.
Najczęściej używa się właściwości typograficznych, np. color, font-size, font-weight, letter-spacing. Celem jest efekt wprowadzający w tekst (lead). Nie wszystkie właściwości mają sens dla "fragmentu wiersza".
Gdy zmienia się szerokość kontenera lub okna, tekst może łamać się w inne miejsca. Ponieważ ::first-line zależy od renderowania, "pierwsza linia" może obejmować inny zakres znaków. To normalne i trzeba to uwzględnić w responsywnych projektach.
::first-line dotyczy całego pierwszego wiersza tekstu, a ::first-letter tylko pierwszej litery (często używane do inicjałów). Oba to pseudoelementy, ale działają na inną część tekstu i służą do innych efektów typograficznych.
W praktyce pseudoelement ::first-line jest przeznaczony dla elementów, które tworzą obszar tekstu łamany na linie (najczęściej blokowych). Dla czysto inline efekt bywa nieintuicyjny. Najbezpieczniej stosować go do akapitów i podobnych bloków tekstu.
Najczęstszy błąd to mylenie pseudoelementu z klasą lub id: wybieranie .first-line albo #first-line zamiast ::first-line. Drugi błąd to pomijanie elementu (np. brak p), gdy styl ma dotyczyć tylko konkretnego typu elementu.
Jeśli opis mówi o fragmencie tekstu typu "pierwsza linia", "pierwsza litera", "przed/po elementem", to zwykle jest to zadanie o pseudoelementach. Wtedy szukaj składni z dwukropkami, np. ::first-line lub ::before, zamiast selektorów klas i id.
info

Statystycznie 49% uczniów zna prawidłową odpowiedź. trudne

Specjaliści zwracają uwagę: "Pseudoelement ::first-line służy do stylowania wyłącznie pierwszej linii tekstu w elemencie blokowym (np. w akapicie)."

Źródła:

  • MDN Web Docs: "::first-line" — https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line (accessed 2026-03-05)
  • MDN Web Docs: "Pseudo-elements" — https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements (accessed 2026-03-05)
  • W3C: "CSS Pseudo-Elements Module Level 4" — https://www.w3.org/TR/css-pseudo-4/ (accessed 2026-03-05)

Materiały:

  • Dokumentacja MDN o pseudoelementach CSS
  • Dokumentacja MDN o ::first-line
  • Specyfikacja CSS Pseudo-Elements (W3C)

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego