Псевдоэлемент CSS ::first-letter

Псевдоэлемент ::first-letter применяет стили к первой букве первой строки в блочном контейнере. Он не выбирает элементы строчного уровня, такие как изображения или inline-таблицы.

Псевдоэлемент ::first-letter не совпадает с знаками препинания, которые стоят перед первой буквой или сразу за ней. Он применяется только к буквенным символам, а не к цифрам или символам.

INFO

В спецификации CSS3 псевдоэлемент ::first-letter был введён для различения псевдоклассов и псевдоэлементов.

Допустимые свойства

Ниже перечислены CSS-свойства, которые можно использовать с псевдоэлементом ::first-letter:

Свойства шрифта: font, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-weight, font-size, font-size-adjust, line-height и font-family.

Свойства фона: background, background-origin, background-position, background-repeat, background-size, background-attachment, background-blend-mode, background-color, background-image и background-clip.

Свойства отступов: margin, margin-top, margin-right, margin-bottom, margin-left.

Свойства внутренних отступов: padding, padding-top, padding-right, padding-bottom, padding-left.

Свойства рамки: сокращения, border-style, border-color, border-width, border-radius, border-image, длинные формы.

Свойство color.

Свойства text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (при необходимости), text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (только float: none;).

Версия

Selectors Level 3

CSS Level 2 (Revision 1)

CSS Level 1

Синтаксис

Пример синтаксиса CSS ::first-letter

css

::first-letter {
  css declarations;
}

Пример использования псевдоэлемента ::first-letter:

Пример кода CSS ::first-letter

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-letter {
        font-size: 35px;
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>::first-letter selector example</h2>
    <p>Lorem ipsum is simply dummy text...</p>
  </body>
</html>

Try it Yourself »

Результат

::first-letter example

Пример использования псевдоэлемента ::first-letter со знаком препинания и цифрой:

Пример кода ::first-letter

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-letter {
        font-size: 35px;
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>::first-letter selector example</h2>
    <p>-Lorem ipsum is simply dummy text...</p>
    <p>1Lorem ipsum is simply dummy text...</p>
  </body>
</html>

Try it Yourself »

Практика

Как работает селектор псевдоэлемента CSS ::first-letter?

Он выбирает и стилизует первую букву каждого абзаца.Он выбирает и стилизует последнюю букву каждого абзаца.Он может использоваться с блочными элементами и ячейками таблиц.Он может использоваться для выбора и стилизации первой буквы каждого слова в абзаце.

Псевдоэлемент CSS ::first-letter ​

Допустимые свойства ​

Версия ​

Синтаксис ​

Пример использования псевдоэлемента ::first-letter: ​

Результат ​

Пример использования псевдоэлемента ::first-letter со знаком препинания и цифрой: ​

Практика ​