Pseudoelement ::first-letter w CSS

11.3. Pseudoelement `::first-letter`

Strona główna > Kurs CSS > Rozdział 11: Pseudoelementy > Pseudoelement ::first-letter

Wprowadzenie: Stylizowanie pierwszej litery

Pseudoelement ::first-letter pozwala wybrać i nadać specjalny styl **pierwszej literze** pierwszego wiersza elementu blokowego (takiego jak akapit <p>, nagłówek <h1>-<h6>, element listy <li>, komórka tabeli <td> itp.).

Jest to często wykorzystywane do tworzenia efektu **inicjału** (ang. drop cap), gdzie pierwsza litera akapitu jest znacznie większa i inaczej sformatowana niż reszta tekstu.

Ważne: ::first-letter działa tylko na elementach, które mają właściwość display ustawioną na block, inline-block, list-item, table-cell lub table-caption. Nie zadziała na elementach czysto liniowych (inline), takich jak <span> czy <a>, chyba że zmienimy ich display.

Jakie znaki obejmuje `::first-letter`?

::first-letter obejmuje nie tylko samą pierwszą literę, ale również:

Wszelkie znaki interpunkcyjne (np. cudzysłowy, nawiasy) poprzedzające pierwszą literę.
W niektórych językach może obejmować więcej niż jeden znak, jeśli tworzą one jedną jednostkę typograficzną (np. dwuznaki jak "IJ" w holenderskim).

<p class="intro">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
<p class="intro">(Drugi) akapit zaczynający się od nawiasu.</p>
<p class="intro">Trzeci akapit.</p>

.intro::first-letter {
  font-size: 3em; /* Powiększ pierwszą literę */
  color: darkred;
  float: left; /* Opcjonalnie: opływanie tekstem */
  margin-right: 0.1em;
  line-height: 0.8; /* Dopasuj wysokość linii dla lepszego wyglądu */
  font-weight: bold;
}

W powyższym przykładzie:

W pierwszym akapicie styl ::first-letter zostanie zastosowany do cudzysłowu i litery "L" ("L).
W drugim akapicie styl zostanie zastosowany do nawiasu i litery "D" ((D).
W trzecim akapicie styl zostanie zastosowany tylko do litery "T".

Dozwolone właściwości CSS dla `::first-letter`

Nie wszystkie właściwości CSS można stosować do ::first-letter. Dozwolone są głównie te związane z:

Czcionką: font, font-family, font-size, font-style, font-variant, font-weight, line-height.
Kolorem i tłem: color, background, text-decoration, text-shadow, word-spacing, letter-spacing, vertical-align (tylko jeśli float jest none).
Modelem pudełkowym: margin, padding, border.
Pozycjonowaniem: float (często używane do tworzenia inicjału opływanego tekstem).

Właściwości takie jak position, display (poza zmianą na block/inline-block itp.), z-index zazwyczaj nie mają zastosowania lub nie działają zgodnie z oczekiwaniami.

Interakcja z `::before`

Jeśli element ma również pseudoelement ::before z właściwością content, to ::first-letter stosuje się do pierwszej litery **całego bloku**, włączając w to treść z ::before.

<p class="with-before">Akapit z treścią.</p>

.with-before::before {
  content: "Start: ";
}

.with-before::first-letter {
  font-size: 2em;
  color: green;
}

W tym przypadku, styl ::first-letter zostanie zastosowany do litery "S" ze słowa "Start: " dodanego przez ::before.

Zadania praktyczne

Zadanie 1 (z rozwiązaniem)

Stwórz akapit tekstu. Użyj ::first-letter, aby powiększyć pierwszą literę akapitu, nadać jej inny kolor i sprawić, by była opływana przez resztę tekstu (używając float: left).

Rozwiązanie:

HTML:

<p class="drop-cap">To jest przykładowy akapit, którego pierwsza litera zostanie ostylowana jako inicjał. Reszta tekstu powinna ładnie opływać powiększoną literę.</p>

CSS:

.drop-cap::first-letter {
  font-size: 4em; /* Znacznie większa litera */
  color: #8B4513; /* Brązowy kolor */
  float: left; /* Opływanie tekstem */
  margin-right: 0.1em; /* Mały margines z prawej */
  margin-bottom: -0.1em; /* Korekta pionowa, może wymagać dostosowania */
  line-height: 0.7; /* Zmniejszona wysokość linii dla inicjału */
  font-family: serif; /* Opcjonalnie: inna czcionka dla inicjału */
}

Efekt: Pierwsza litera "T" będzie duża, brązowa i opływana przez resztę tekstu akapitu.

Zadanie 2 (do samodzielnego wykonania)

Stwórz nagłówek h2. Użyj ::first-letter, aby nadać pierwszej literze nagłówka inny kolor i pogrubienie.

Zadanie 3 (do samodzielnego wykonania)

Stwórz element listy li. Użyj ::first-letter, aby powiększyć pierwszą literę tekstu w elemencie listy (pamiętaj, że li domyślnie jest list-item, więc ::first-letter zadziała).

FAQ - Najczęściej zadawane pytania

Czy `::first-letter` działa na elementach `inline`?

Nie bezpośrednio. Pseudoelement ::first-letter ma zastosowanie tylko do elementów, które są blokowe lub zachowują się jak blokowe (block, inline-block, list-item, table-cell, table-caption). Jeśli chcesz ostylować pierwszą literę elementu span, musisz najpierw zmienić jego display na np. inline-block.

Jak `::first-letter` traktuje znaki interpunkcyjne na początku?

Jeśli przed pierwszą literą występują znaki interpunkcyjne (np. ", (, [), są one zazwyczaj włączane do selekcji ::first-letter i otrzymują ten sam styl. Na przykład, w tekście `"Cytat` styl zostanie zastosowany do `"C`.

Czy mogę użyć `::first-letter` do stylizowania pierwszej litery każdego słowa?

Nie, ::first-letter stylizuje tylko pierwszą literę całego bloku tekstu. Nie ma wbudowanego pseudoelementu CSS do stylizowania pierwszej litery każdego słowa. Taką funkcjonalność trzeba by zrealizować za pomocą JavaScript.

Jak precyzyjnie kontrolować wygląd inicjału (drop cap)?

Tworzenie idealnie wyglądającego inicjału może wymagać dostosowania kilku właściwości: font-size, line-height (często mniejsza niż 1), margin (szczególnie prawy i dolny, czasem ujemny), padding, float: left. Warto eksperymentować z tymi wartościami, aby uzyskać pożądane wyrównanie i opływanie tekstu.

11.3. Pseudoelement ::first-letter