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' в этой спецификации.
Рекомендация Изначальное определение, используя синтаксис с одним двоеточием.

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Базовая поддержкаChrome Полная поддержка 1
Полная поддержка 1
Полная поддержка 1
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :first-letter
Edge Полная поддержка Да
Полная поддержка Да
Полная поддержка Да
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :first-letter
Firefox Полная поддержка 1
Полная поддержка 1
Полная поддержка 1
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :first-letter
IE Полная поддержка 9
Полная поддержка 9
Полная поддержка 5.5
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :first-letter
Opera Полная поддержка 7
Полная поддержка 7
Полная поддержка 3.5
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :first-letter
Safari Полная поддержка 1
Полная поддержка 1
Полная поддержка 1
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :first-letter
WebView Android ? Chrome Android ? Edge Mobile Полная поддержка Да
Полная поддержка Да
Полная поддержка Да
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :first-letter
Firefox Android Полная поддержка 4
Полная поддержка 4
Полная поддержка 4
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :first-letter
Opera Android ? Safari iOS ? Samsung Internet Android ?
Support for the Dutch digraph IJChrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See bug 92176.
IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android ? Chrome Android ? Edge Mobile Нет поддержки НетFirefox Android Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See bug 92176.
Opera Android ? Safari iOS ? Samsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Смотрите замечания реализации.
Смотрите замечания реализации.
Использует нестандартное имя.
Использует нестандартное имя.

См. также

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

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