Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - PAŹDZIERNIK 2016



PYTANIE NR 8.
W języku CSS zapis postaci

h1::first-letter {color: red;}

sprawi, że koloru czerwonego będzie

A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Selektor h1::first-letter wskazuje pseudoelement "pierwszej litery" wewnątrz elementu h1, a nie cały nagłówek. Deklaracja color: red; zmieni więc kolor tylko pierwszego znaku (litery) nagłówka pierwszego stopnia. Nie dotyczy h2 ani pierwszej linii akapitu.

Pełne wyjaśnienie:

W regule CSS h1::first-letter { color: red; } część h1 jest selektorem typu (dotyczy elementów nagłówka pierwszego stopnia), a zapis ::first-letter to pseudoelement wybierający pierwszą literę (pierwszy znak typograficzny) w obrębie danego elementu.

Właściwość color steruje kolorem tekstu, więc zastosowana do pseudoelementu zmienia barwę tylko tej wydzielonej części, a nie całego nagłówka. Dlatego poprawne jest stwierdzenie, że czerwony będzie pierwsza litera nagłówka pierwszego stopnia.

  • Odpowiedź "tekst nagłówka pierwszego stopnia." jest błędna, bo do zmiany całego tekstu wystarczyłby selektor h1 bez pseudoelementu. Pseudoelement zawęża zakres do fragmentu (pierwszej litery).
  • Odpowiedź "pierwsza litera nagłówka drugiego stopnia." jest błędna, ponieważ selektor wskazuje h1, a nie h2. Aby stylować h2, należałoby użyć h2::first-letter.
  • Odpowiedź "pierwsza linia paragrafu." jest błędna: "pierwsza linia" to inny pseudoelement (::first-line) i dotyczy zwykle bloków tekstu, np. akapitów p. W tym pytaniu nie ma selektora p ani pseudoelementu pierwszej linii.

Wskazówka egzaminacyjna: zapamiętaj parę ::first-letter (pierwsza litera) vs ::first-line (pierwsza linia). Różnica jest częstym źródłem pomyłek przy pytaniach o selektory i pseudoelementy.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co robi pseudoelement ::first-letter w CSS?
Pseudoelement ::first-letter pozwala ostylować pierwszą literę (pierwszy znak typograficzny) pierwszego sformatowanego wiersza danego elementu. Stosuje się go m.in. do efektu inicjału w tekście lub wyróżnienia pierwszej litery nagłówka.
Jak działa selektor h1::first-letter { color: red; }?
Reguła wybiera pierwszą literę każdego elementu h1 i nadaje jej kolor czerwony przez właściwość color. Nie zmienia koloru całego nagłówka, bo zakres działania ogranicza pseudoelement ::first-letter.
Dlaczego nie zmienia się kolor całego nagłówka przy ::first-letter?
Ponieważ ::first-letter nie wskazuje całego elementu, tylko jego fragment. To częsty błąd interpretacji: właściwość color działa na to, co zostało wybrane selektorem, a selektor z pseudoelementem zawęża wybór do pierwszej litery.
Jaka jest różnica między ::first-letter a ::first-line?
::first-letter dotyczy pierwszej litery/znaku, a ::first-line dotyczy całej pierwszej linii tekstu (zależnej od szerokości kontenera i łamania wierszy). Na egzaminie warto kojarzyć: "letter" = litera, "line" = linia.
Czy można używać :first-letter zamiast ::first-letter?
W praktyce historycznie spotyka się zapis z jednym dwukropkiem, ale współcześnie zalecany jest zapis z dwoma dwukropkami dla pseudoelementów. Na egzaminach najczęściej używa się formy ::, bo jest zgodna z aktualnym zapisem w dokumentacji.
Jak ostylować pierwszą literę nagłówka h2 na czerwono?
Należy zmienić selektor typu na h2, np. h2::first-letter { color: red; }. Kluczowe jest dopasowanie elementu (h2) i pseudoelementu (::first-letter), bo inaczej styl zadziała na inną część dokumentu.
Czy ::first-letter działa na elementach innych niż nagłówki?
Tak, często używa się go na elementach blokowych z tekstem, np. akapitach. Ważne, aby element zawierał tekst, z którego da się wyodrębnić pierwszą literę. W praktyce efekt "inicjału" najczęściej realizuje się właśnie na akapitach.
Jakie właściwości CSS najczęściej stosuje się z ::first-letter?
Najczęściej stosuje się właściwości typograficzne, np. color, font-size, font-weight czy float (dla inicjału). Nie każda właściwość ma sens na pojedynczej literze, dlatego najlepiej myśleć o tym jak o fragmencie tekstu.
Jakie błędy najczęściej popełnia się w pytaniach o pseudoelementy CSS?
Typowe pomyłki to: mylenie ::first-letter z ::first-line, pomijanie elementu w selektorze (np. h1 vs h2) oraz zakładanie, że właściwość wpłynie na cały tekst. Warto zawsze czytać selektor od lewej do prawej.
Jak rozpoznać na egzaminie, że chodzi o pseudoelement, a nie pseudoklasę?
Pseudoelement zwykle opisuje część elementu (np. pierwsza litera, pierwszy wiersz), a pseudoklasa opisuje stan/relację (np. :hover, :focus). Dodatkową wskazówką jest zapis z ::, który jest charakterystyczny dla pseudoelementów.
info

Statystycznie 73% uczniów zna prawidłową odpowiedź. średnio łatwe

W praktyce zawodowej kluczowe jest to, że selektor h1::first-letter wskazuje pseudoelement "pierwszej litery" wewnątrz elementu h1, a nie cały nagłówek.

Źródła:

  • MDN Web Docs: "::first-letter" — https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter (dostęp: 2026-03-02)
  • MDN Web Docs: "Pseudo-elements" — https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements (dostęp: 2026-03-02)
  • W3C: "CSS Pseudo-Elements Module Level 4" (sekcja dot. ::first-letter) — https://www.w3.org/TR/css-pseudo-4/ (dostęp: 2026-03-02)

Materiały:

  • Dokumentacja MDN: pseudoelement ::first-letter (opis i przykłady)
  • Dokumentacja MDN: pseudoelement ::first-line (dla porównania i uniknięcia pomyłek)
  • Specyfikacja W3C dotycząca pseudoelementów w CSS (rozdział o ::first-letter)
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego