Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - STYCZEŃ 2017



PYTANIE NR 11.
W języku CSS aby zdefiniować odmienne formatowanie dla pierwszej litery akapitu, należy zastosować selektor
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Pseudoelement ::first-letter służy do stylowania pierwszej litery pierwszego wiersza elementu blokowego, np. akapitu <p>. Dlatego selektor p::first-letter pozwala zdefiniować odmienne formatowanie dla pierwszej litery akapitu. Pozostałe zapisy nie są właściwym pseudoelementem dla tej funkcji.

Pełne wyjaśnienie:

W CSS wyróżnia się m.in. klasy, selektory atrybutów, relacje między elementami (np. sąsiedztwo) oraz pseudoelementy. Do sformatowania konkretnej części elementu (np. pierwszej litery, pierwszej linii) służą właśnie pseudoelementy.

Odpowiedź "pseudoelementu p::first-letter" jest poprawna, bo ::first-letter wskazuje pierwszą literę tekstu w elemencie (typowo blokowym), a poprzedzenie go selektorem typu p zawęża działanie do akapitów <p>. Dzięki temu można uzyskać efekt inicjału: większy rozmiar, inny kolor, font lub margines dla pierwszej litery akapitu.

Dlaczego pozostałe propozycje są błędne:

  • "dziecka p + first-letter" miesza pojęcia. Znak + w CSS to selektor sąsiedniego rodzeństwa (adjacent sibling), a first-letter bez prefiksu :: nie jest poprawnym pseudoelementem.
  • "atrybutu p [first-letter]" to składnia selektora atrybutu (nawiasy kwadratowe), używana do wyboru elementów z danym atrybutem HTML. "first-letter" nie jest standardowym atrybutem elementu <p> i nie spełnia celu stylowania pierwszej litery.
  • "klasy p.first-letter" oznacza element <p> z klasą first-letter. To działałoby tylko wtedy, gdy ręcznie dodasz taką klasę w HTML, ale nadal nie wybiera "pierwszej litery" tekstu, tylko cały element <p>.

Wskazówka egzaminacyjna: jeśli pytanie dotyczy fragmentu treści (pierwsza litera, pierwsza linia), szukaj odpowiedzi z pseudoelementem, zwykle zapisywanym z podwójnym dwukropkiem, np. ::first-letter.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to jest pseudoelement ::first-letter w CSS?
::first-letter to pseudoelement CSS, który pozwala stylować pierwszą literę tekstu w wybranym elemencie (najczęściej blokowym). Używa się go np. do efektu inicjału w akapitach, ustawiając większą czcionkę, inny kolor lub krój.
Jak zapisać selektor dla pierwszej litery w akapicie <p>?
Najczęściej stosuje się selektor p::first-letter. Oznacza to: wybierz elementy <p>, a następnie zastosuj style tylko do pierwszej litery ich tekstu. Dzięki temu nie zmieniasz formatowania całego akapitu, tylko jego fragment.
Dlaczego w CSS używa się ::, a nie : w ::first-letter?
Współczesna konwencja rozróżnia pseudoklasy (:, np. :hover) i pseudoelementy (::, np. ::first-letter). W praktyce wiele przeglądarek akceptuje też zapis z jednym dwukropkiem, ale na egzaminie bezpieczniej używać formy standardowej ::.
Czy ::first-letter działa dla każdego elementu HTML?
Najpewniej działa dla elementów blokowych lub takich, które zawierają tekst (np. akapity, nagłówki). Jeśli element nie ma tekstu albo tekst jest w innym węźle, efekt może być inny niż oczekiwany. W praktyce testuje się to w przeglądarce i stosuje do typowych bloków treści.
Co jest różnicą między .first-letter a ::first-letter?
.first-letter to selektor klasy i wybiera cały element z klasą first-letter. ::first-letter to pseudoelement i wybiera tylko pierwszą literę tekstu w elemencie. Klasa nie "wycina" pierwszej litery automatycznie — do tego służą pseudoelementy.
Jakie style najczęściej stosuje się z ::first-letter?
Typowe zastosowania to font-size (większa litera), font-weight (pogrubienie), color (inny kolor) oraz czasem float i marginesy, aby uzyskać efekt inicjału w tekście artykułu. Ważne jest, by nie pogorszyć czytelności.
Dlaczego selektor p [first-letter] nie jest poprawny dla pierwszej litery?
Zapis z nawiasami kwadratowymi to selektor atrybutu: wybiera elementy mające określony atrybut HTML. "first-letter" nie jest standardowym atrybutem akapitu <p>, więc taki selektor nie rozwiązuje problemu. Do pierwszej litery używa się pseudoelementu.
Kiedy zamiast ::first-letter lepiej użyć dodatkowego <span>?
Gdy chcesz precyzyjnie kontrolować, co jest "pierwszą literą" (np. tekst zaczyna się od cudzysłowu, ikonki, skrótu) albo gdy treść jest dynamicznie składana. Wtedy ręczne opakowanie fragmentu w <span> (lub przez JS) daje pełną kontrolę, kosztem ingerencji w HTML.
Jakie błędy najczęściej robi się w pytaniach o pseudoelementy CSS?
Najczęściej myli się pseudoelementy z klasami (kropka) i atrybutami (nawiasy kwadratowe), albo zapomina o prefiksie ::. Częsty jest też wybór selektora z +, który oznacza sąsiednie rodzeństwo, a nie "część tekstu" wewnątrz elementu.
Jak szybko rozpoznać na egzaminie, że chodzi o pseudoelement?
Jeśli pytanie dotyczy fragmentu elementu (pierwsza litera, pierwsza linia, zaznaczenie), to zwykle chodzi o pseudoelement. Szukaj odpowiedzi z zapisem :: i nazwą typu first-letter lub first-line. Klasy i atrybuty wybierają całe elementy.
info

Statystycznie 61% uczniów zna prawidłową odpowiedź. średnie

Według specjalistów z branży: "Pseudoelement ::first-letter służy do stylowania pierwszej litery pierwszego wiersza elementu blokowego, np. akapitu &lt;p&gt;."

Źródła:

  • MDN Web Docs: "::first-letter" pseudo-element — https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter (dostęp: 2026-03-01)
  • MDN Web Docs: "Pseudo-elements" — https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements (dostęp: 2026-03-01)
  • W3C Recommendation: "Selectors Level 3", section "Pseudo-elements" — https://www.w3.org/TR/selectors-3/#pseudo-elements (dostęp: 2026-03-01)

Materiały:

  • Dokumentacja MDN Web Docs dotycząca pseudoelementu ::first-letter
  • W3C Selectors Level 3/4 – rozdziały o pseudoelementach
  • Ćwiczenia praktyczne: tworzenie arkusza stylów dla treści artykułu i testowanie selektorów
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego