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

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

К ::first-line можно применить только определенный набор свойств CSS. Полный список приведен в разделе Допустимые свойства ниже.

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

Псевдоэлемент ::first-line также можно записать с одним двоеточием (:first-line), что поддерживается всеми браузерами.

Версия

CSS Pseudo-Elements Level 4

Selectors Level 3

CSS Level 2

CSS Level 1

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

Псевдоэлемент ::first-line принимает только некоторые свойства CSS. Рассмотрим их:

Все свойства, связанные с шрифтом: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch и font-family.
Все свойства, связанные с фоном: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment и background-blend-mode.
Некоторые свойства, используемые для стилизации текста: text-shadow, text-decoration, text-decoration-color, text-decoration-line и text-decoration-style.
Свойство CSS color.
word-spacing, line-height, letter-spacing, text-transform и white-space.

Специфичность и наследование псевдоэлемента ::first-line

Текст на первой строке наследует только свойства, применимые к псевдоэлементу ::first-line. Для всех остальных свойств он наследует значения от родительского элемента. Например, псевдоэлемент ::first-letter наследует стили, примененные псевдоэлементом ::first-line.

Псевдоэлемент ::first-line имеет более высокую специфичность, чем селектор базового элемента, поэтому его стили переопределяют обычные объявления для элемента. Однако стандартные правила CSS !important по-прежнему применяются в соответствии с обычными правилами каскада.

Синтаксис

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

css

::first-line {
  css declarations;
}

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

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

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-line {
        color: #85d6de;
        text-transform: uppercase;
      }
    </style>
  </head>
  <body>
    <h2>::first-line selector example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </body>
</html>

Try it Yourself »

Результат

Свойство CSS ::first-line

Практика

К чему можно применить селектор псевдоэлемента ::first-line в CSS?

Блочные элементыСтрочные элементыЭлементы с псевдоэлементами ::before и ::afterЭлементы, для которых установлено свойство float

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

Версия ​

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

Специфичность и наследование псевдоэлемента ::first-line ​

Синтаксис ​

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

Результат ​

Практика ​