Przedstawiono efekt formatowania CSS oraz kod HTML. Jak należy zdefiniować styl, aby osiągnąć takie formatowanie?
A. #first-line { font-size: 200%; color: brown; }
B. p.first-line { font-size: 200%; color: brown; }
C. p::first-line { font-size: 200%; color: brown; }
D. .first-line { font-size: 200%; color: brown; }
Pytanie z egzaminu CKE, czerwiec 2018 (arkusz E.14-X-18.06).
Selektor p::first-line { font-size: 200%; color: brown; } jest tutaj właściwy, bo używa pseudoelementu CSS ::first-line. Ten pseudoelement odnosi się nie do elementu o konkretnej klasie albo identyfikatorze, tylko do pierwszej sformatowanej linii tekstu wewnątrz elementu, w tym przypadku akapitu p. W pokazanym kodzie HTML nie ma klasy first-line ani identyfikatora first-line, więc styl musi wynikać z mechanizmu CSS, a nie z atrybutów HTML. Efekt na obrazku dokładnie to pokazuje: tylko pierwsza linia akapitu ma większy rozmiar czcionki i brązowy kolor, a pozostałe linie zostają w normalnym stylu. W praktyce ::first-line przydaje się np. w artykułach, cytatach, wstępach tekstów albo ozdobnym formatowaniu pierwszego wersu bez dodawania dodatkowych znaczników w HTML. To jest też dobra praktyka: struktura zostaje w HTML, a wygląd w CSS. Warto pamiętać, że zgodnie ze standardem CSS pseudoelementy zapisujemy obecnie z podwójnym dwukropkiem, czyli ::first-line, choć starszy zapis :first-line też bywa obsługiwany dla zgodności. Moim zdaniem to jeden z fajniejszych przykładów, gdzie CSS robi robotę bez zaśmiecania kodu dodatkowymi spanami czy klasami na siłę.
W tym zadaniu łatwo pomylić pseudoelement CSS z klasą albo identyfikatorem, bo nazwa first-line wygląda trochę tak, jakby była zwykłą nazwą stylu nadaną ręcznie. Selektor .first-line oznacza klasę, czyli zadziałałby dopiero wtedy, gdy jakiś element w HTML miałby atrybut class równy first-line. W pokazanym fragmencie takiego atrybutu nie ma, więc przeglądarka nie miałaby czego dopasować. Podobnie zapis #first-line odnosi się do identyfikatora id, a identyfikatory stosuje się do wskazywania jednego konkretnego elementu dokumentu. Tu też nie występuje id o takiej wartości, więc taki CSS nie zmieni wyglądu tekstu. Z kolei p.first-line oznacza element p, który jednocześnie ma klasę first-line. To nadal jest selektor klasowy, tylko zawężony do akapitów, a nie mechanizm wybierania pierwszego wiersza tekstu. Typowy błąd polega na tym, że ktoś patrzy na nazwę first-line i traktuje ją jak dowolną nazwę klasy, zamiast rozpoznać składnię pseudoelementu. W CSS różnica składni jest bardzo ważna: kropka wybiera klasę, kratka wybiera id, a podwójny dwukropek wskazuje pseudoelement, czyli specjalną część elementu generowaną lub wybieraną przez przeglądarkę. ::first-line działa dynamicznie, bo pierwsza linia może się zmienić zależnie od szerokości okna, kroju pisma czy rozmiaru fontu. Dlatego właśnie jest to poprawne rozwiązanie do formatowania pierwszej linii akapitu, a nie zwykłe przypisywanie klasy w HTML. Z mojego doświadczenia najlepiej zapamiętać to tak: jeśli styl ma dotyczyć fragmentu tekstu, którego nie ma jako osobnego znacznika w kodzie, często wchodzą w grę pseudoelementy CSS.