CSS псевдоэлемент ::first-letter применяет стили к первой букве первой строки блочного элемента, но только если нету другого предшествующего содержимого (такого как изображения или инлайн таблицы).

/* Стили ддля первой буквы элемента <p> */
p::first-letter {
  font-size: 130%;
}

Может быть непросто определить первую букву элемента:

  • Пунктуация, которая предшествует или следует сразу за первой буквой, включается в селектор. Пунктуация включает любой символ Юникода, определённый в классах open (Ps), close (Pe), initial quote (Pi), final quote (Pf), and other punctuation (Po).
  • В некоторых языках существуют диграфы, которые должны преобразовываться в верхний регистр вместе, например IJ в Нидерландском. В этих случаях обе буквы диграфа должны соответствовать псевдоэлементу ::first-letter  (это слабо поддерживается браузерами, смотрите таблицу совместимости ниже).
  • Комбинация псевдоэлемента ::before и свойства content может привести к добавлению некоторого текста в начало элемента. В этом случае псевдоэлементу ::first-letter будет соответствовать первая буква добавленного содержимого.

В CSS3 появилась запись  ::first-letter (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись :first-letter, введённую в CSS2.

Разрешённые свойства

Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом ::first-letter:

Синтаксис

/* CSS3 syntax */
::first-letter

/* CSS2 syntax */
:first-letter

Пример

Сделаем первую букву каждого абзаца красной и большой.

HTML

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
  esse molestie consequat.</p>
<p>-Начало специального знака препинания.</p>
<p>_Начало специального знака препинания.</p>
<p>"Начало специального знака препинания.</p>
<p>'Начало специального знака препинания.</p>
<p>*Начало специального знака препинания.</p>
<p>#Начало специального знака препинания.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>“特殊的汉字标点符号开头。</p>

CSS

p::first-letter {
  color: red;
  font-size: 130%;
}

Результат

Спецификации

Спецификация Статус Комментарий
CSS Pseudo-Elements Level 4
Определение '::first-letter' в этой спецификации.
Рабочий черновик Обобщает разрешённые свойства до типографических, оформления текста, инлайн свойств разметки, opacity и box-shadow.
CSS Text Decoration Module Level 3
Определение 'text-shadow with ::first-letter' в этой спецификации.
Кандидат в рекомендации Разрешает использовать text-shadow с ::first-letter.
Selectors Level 3
Определение '::first-letter' в этой спецификации.
Рекомендация Введение синтаксиса с двумя двоеточиями. Определения поведения в граничных случаях, таких как внутри элементов списка или для некоторых специфичных языков (например Нидерландский диграф IJ).
CSS Level 2 (Revision 1)
Определение '::first-letter' в этой спецификации.
Рекомендация Нет измененений.
CSS Level 1
Определение '::first-letter' в этой спецификации.
Рекомендация Изначальное определение, используя синтаксис с одним двоеточием.

Поддержка браузерами

ВозможностьChromeEdgeFirefoxInternet ExplorerOperaSafari
Базовая поддержка

1

11

Да

Да1

1

11

9

5.51

7

3.51

1

11

Support for the Dutch digraph IJ Нет Нет Нет2 Нет Нет Нет
ВозможностьAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Базовая поддержка ? ?

Да

Да1

4

41

? ? ?
Support for the Dutch digraph IJ ? ? Нет Нет2 ? ? Нет

1. Supported as :first-letter.

2. See bug 92176.

См. также

Метки документа и участники

 Внесли вклад в эту страницу: dima74
 Обновлялась последний раз: dima74,