Все справочники находятся в стадии наполнения. Если у вас есть идеи на счёт того как улучшить этот раздел, то вы можете оставить комментарий под конкретной записью или написать свои предложения по адресу admin@tuhub.ru.

::first-letter

CSS ::first-letter

::first-letter - это псевдоэлемент, который выбирает первую букву в первой строке блочного элемента (например, такого как параграф <p>), если перед этой буквой нет какого-либо другого контента (такого как изображение или таблицы).

Общие сведения

Псевдоэлемент ::first-letter не выберет первую букву у строчных элементов: то есть у тех элементов, у которых свойство display установлено в значение inline. Он работает только с элементами у которых свойство display установлено в значения block, inline-block, table-cell, table-caption, или list-item.

Если в элементе есть некоторое текстовое содержимое, добавленное в начало элемента с помощью псевдоэлемента :before и свойства content, то первая буква этого содержимого станет целевой буквой для псевдоэлемента ::first-letter.

Например, если в цитате есть содержимое добавленное с помощью следующего правила:

blockquote:before {
  content: "Цитата: ";
}

из селектора blockquote:before выберется буква «Ц» от слова «Цитата:», даже если внутри самой цитаты есть другой текст.

Знаки пунктуации, которые предшествуют или следуют за первой буквой, будут включены в ::first-letter.

Синтаксис псевдоэлемента

/* Старый синтаксис CSS2 */

p:first-letter {
  /* Здесь содержимое и стили */
}

/* Новый синтаксис CSS3 */

p::first-letter {
  /* Здесь содержимое и стили */
}

Свойства используемые :first-letter для стилизации

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

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

::first-letter CSS pseudo-element selector

IE
9
0.21%
10
0.02%
11
1.1%
Edge
86
0.08%
87
2.95%
88
0%
Firefox
83
1.59%
84
1.05%
85
0.02%
86
0%
87
0%
Chrome
86
4.26%
87
19.33%
88
0.03%
89
0.02%
90
0%
Safari
13
0.15%
13.1
0.99%
14
2.64%
TP
0%
iOS Safari
13.3
0.32%
13.4-13.7
1.63%
14.0-14.3
10.29%
Chrome for Android
88
37.52%

Примечание

Наследование и специфика

Если элемент к которому применяется псевдоэлемент :first-letter является элементом списка (display: list-item), то оно применяется к первой букве после маркера. Браузеры могут игнорировать :first-letter применяемое на элементах списка со свойством list-style-position: inside.

В некоторых языках могут присутствовать определённые правила касающиеся обработки определённых комбинаций букв. В голландском, например, если комбинация букв «ij» находится в начале слова, то псевдоэлемент :first-letter будет рассматривать их как одну букву.

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

Разница между нотациями: (:) и (::)

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

В CSS1 и CSS2 псевдоэлементы определялись с помощью одного двоеточия (:), также как и псевдоклассы (например :hover). В CSS3 для псевдоэлементов была добавлена нотация с двумя двоеточиями чтобы отличать их от псевдоклассов.

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

Пример