Pseudo-element ::first-line w CSS służy do formatowania pierwszej, faktycznie wyrenderowanej linii tekstu w elemencie. Oznacza to, że przeglądarka wyznacza, gdzie kończy się pierwszy wiersz na podstawie dostępnej szerokości, użytej czcionki i łamania wierszy. Następnie tylko ten fragment może otrzymać wskazane style.
Selektor p::first-line dopasowuje więc pierwszą linię każdego elementu p na stronie. Deklaracja font-size: 150% nie oznacza "powiększ o 150%", tylko "ustaw rozmiar na 150% wartości bazowej", czyli np. przy 16px bazowo da efekt 24px (1,5 × 16px) dla tej pierwszej linii.
Dlaczego pozostałe odpowiedzi są błędne?
- Stwierdzenie o mniejszej czcionce przeczy wprost wartości 150%, która zwiększa rozmiar.
- Teza, że tylko pierwszy paragraf będzie powiększony, wynika z mylenia słowa "first" z "pierwszym elementem w dokumencie". Tutaj "first-line" dotyczy pierwszej linii w każdym paragrafie, bo selektor obejmuje wszystkie p.
- Stwierdzenie, że całość tekstu paragrafu będzie powiększona, myli pseudo-element (fragment elementu) z selektorem całego elementu. ::first-line nie obejmuje całej zawartości, tylko pierwszy wiersz.
Wskazówka egzaminacyjna: jeśli w selektorze widzisz ::, zwykle jest to pseudo-element (część elementu), więc spodziewaj się działania "na fragmencie", a nie na całym bloku.
