Все справочники находятся в стадии наполнения. Если у вас есть идеи на счёт того как улучшить этот раздел, то вы можете оставить комментарий под конкретной записью или написать свои предложения по адресу 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.15%
10
0.09%
11
2.64%
Edge
15
0.07%
16
0.26%
17
1.38%
18
0%
Firefox
59
0.08%
60
0.45%
61
2.91%
62
0.09%
63
0%
Chrome
66
0.53%
67
23.47%
68
0.59%
69
0.04%
70
0%
Safari
10.1
0.22%
11
0.22%
11.1
1.37%
12
0.01%
TP
0%
iOS Safari
10.3
0.61%
11.0-11.2
1.3%
11.3-11.4
7.25%
12
0.07%
Chrome for Android
67
32.65%

Примечание

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

Если элемент к которому применяется псевдоэлемент :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, то можете использовать вариант с двумя двоеточиями и не беспокоится за поддержку браузерами.

Пример

Здесь прописать свой код адсенс