W3docs
ru
Войти

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

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

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

Чаще всего он используется для типографских эффектов, которые газеты и журналы применяют к первой строке статьи: другой цвет, капитель или увеличенный межбуквенный интервал — без добавления лишней разметки. Поскольку «первая строка» зависит от ширины элемента, размера шрифта и viewport пользователя, браузер пересчитывает стилизуемый фрагмент при каждом изменении макета.

К ::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-свойства. Рассмотрим их:

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

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

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

Синтаксис

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

::first-line {
  css declarations;
}

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

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

<!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>
Попробуйте сами »

В этом примере только слова, попадающие на первую отображаемую строку абзаца, окрашиваются в светло-голубой цвет и переводятся в верхний регистр. Измените размер окна — и стилизованная часть изменится автоматически, потому что ::first-line следует за строкой, которую браузер фактически выстраивает, а не за фиксированным числом символов.

Результат

CSS ::first-line property

Важные замечания

  • Реагируют только блочные контейнеры. Применение ::first-line к строчному элементу (например, <span> или <a>, которому не задан display: block) не даёт никакого эффекта.
  • Строка динамическая. Нет способа выбрать фиксированное количество символов — если viewport, шрифт или отступы изменятся, браузер пересчитает, какой текст относится к первой строке, и применит стили заново.
  • Поддержка свойств ограничена. Свойства, влияющие на макет (такие как margin, padding, border или width), игнорируются для ::first-line. Используйте только свойства из раздела Допустимые свойства.
  • Порядок важен при использовании ::first-letter. Если вы стилизуете оба псевдоэлемента, задайте их так, чтобы было понятно, какой из них имеет приоритет: стили ::first-letter переопределяют совпадающие свойства, унаследованные от ::first-line. Для стилизации буквицы см. псевдоэлемент ::first-letter.

Практика

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