::first-letter

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

Псевдоэлемент ::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 может использовать для стилизации только определённые свойства:

• Свойства шрифтов: font, font-style, font-variant, font-weight, font-size, line-height, и font-family.
• text-decoration, text-transform, letter-spacing, word-spacing (при необходимости), float, vertical-align (только если у float значение none), и color.
• Свойства внешних отступов: margin, margin-top, margin-right, margin-bottom, и margin-left.
• Свойства внутренних отступов: padding, padding-top, padding-right, padding-bottom, и padding-left.
• Свойства границ: border, border-width, border-style, border-color, и соответствующие им свойства.
• Свойства фона: background, background-color, background-image, background-position, background-repeat, background-size, и background-attachment.

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

Примечание

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

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

Пример