First line css: ::first-line (:first-line) — CSS | MDN

::first-line (:first-line) — CSS | MDN

CSS псевдоэлемент ::first-line применяет стили к первой строке блочного элемента. Обратите внимание, что длина первой строки зависит от многих факторов, включая ширину элемента, ширину документа и размер шрифта текста.

/* Стили для первой строки элемента <p> */
p::first-line {
  color: red;
}

Примечание: В CSS3 появилась запись ::first-line (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись :first-line, введённую в CSS2.

Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом ::first-line:

  • Все свойства, связанные с шрифтами: font, font-kerning (en-US), font-style, font-variant (en-US), font-variant-numeric, font-variant-position (en-US), font-variant-east-asian
    (en-US), font-variant-caps (en-US), font-variant-alternates (en-US), font-variant-ligatures, font-synthesis (en-US), font-feature-settings (en-US), font-language-override (en-US), font-weight, font-size, font-size-adjust (en-US), font-stretch (en-US) и font-family
  • Все свойства, связанные с фоном: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment и background-blend-mode
  • Свойство color (en-US)
  • word-spacing, letter-spacing
    , text-decoration (en-US), text-transform (en-US) и line-height
  • text-shadow, text-decoration (en-US), text-decoration-color (en-US), text-decoration-line (en-US), text-decoration-style (en-US) и vertical-align.

Error: could not find syntax for this item

HTML

<p>Стили будут применены только к первой строке этого параграфа.
После этого, весь текст будет отображаться как обычно. Увидели, что я имею в виду?</p>
<span>Первая строка этого элемента не будет стилизована специальным образом
потому что это не блочный элемент.</span>

CSS

::first-line {
  color: blue;
  text-transform: uppercase;
  /* ПРЕДУПРЕЖДЕНИЕ: НЕ ИСПОЛЬЗУЙТЕ ЭТО */
  /* Многие свойства запрещены в псевдоэлементах ::first-line */
  margin-left: 20px;
  text-indent: 20px;
}

Результат

Specification
CSS Pseudo-Elements Module Level 4
# first-line-pseudo

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.
  • ::first-letter

Last modified:

  • Содержание
    • Синтаксис
    • Пример
    • Примечание
    • Спецификация
    • Браузеры

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

Синтаксис

Селектор::first-line { ... }

Обозначения

Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>first-line</title> <style> p::first-line { color: red; /* Красный цвет текста */ font-style: italic; /* Курсивное начертание */ font-weight: bold; /* Жирное начертание */ } </style> </head> <body> <p>Олимпия 2008<br> Основной претендент на I место это конечно же Джей Катлер, достигший наивысшего результата за последние два года. </p> </body> </html>

Результат примера показан на рис. 1. В данном примере первая строка, выделенная с помощью тега <br>, изменяет свой вид за счет начертания и цвета.

Рис. 1. Результат использования псевдоэлемента ::first-line

Примечание

В CSS3 псевдоэлементы стали обозначаться двумя двоеточиями, чтобы синтаксис отличался от псевдоклассов. В CSS2 они обозначаются одним двоеточием. Браузеры, как правило, понимают оба синтаксиса.

Спецификация

Спецификация Статус
CSS Pseudo-Elements Module Level 4 Рабочий проект
Selectors Level 3 Рекомендация
CSS Level 2 Revision 1 (CSS 2.1) Рекомендация
CSS Level 1 Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

 
:first-line 5.5 12 1 3. 5 1 1
::first-line 9 12 1 7 1 1
 
:first-line 1 1 4 1
::first-line 1 1 7 1

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Псевдоэлементы

Текст и шрифт

См. также

  • Псевдоэлементы

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 30.08.2017

Редакторы: Влад Мержевич

::первая строка — CSS: Каскадные таблицы стилей

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

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

Примечание. Селекторы уровня 3 ввели нотацию с двойным двоеточием ( :: ), чтобы отличать псевдоклассы от псевдоэлементов, которые представляют собой одиночное двоеточие : . Браузеры принимают как ::first-line , так и

:first-line , введенный в CSS2.

Только небольшое подмножество свойств CSS можно использовать с ::first-line псевдоэлемент:

  • Все свойства шрифта: font , font-kerning , font-style , font-variant , font-variant-numeric font-variant-position , font-variant-east-asian , font-variant-caps , font-variant-alternates , font-variant-ligatures , font-synthese , 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 ,

    40 background-size background-attachment

    и background-blend-mode
  • Цвет свойство
  • word-spacing , letter-spacing , text-decoration , text-transform и line-height
  • text-shadow , text-decoration , text-decoration-color , text-decoration-line , text-decoration-style и vertical-align .
 :: первая линия
 

HTML

 

Стили будут применены только к первой строке этого абзаца. После того, весь текст будет оформлен как обычный. Видишь, что я имею в виду?

<диапазон> Первая строка этого текста не получит особого стиля, поскольку она не блочный элемент.

CSS

 :: первая строка {
  цвет синий;
  преобразование текста: верхний регистр;
  /* ВНИМАНИЕ: НЕ ИСПОЛЬЗУЙТЕ ЭТО */
  /* Многие свойства недействительны в псевдоэлементах ::first-line */
  поле слева: 20px;
  отступ текста: 20px;
}
 

Result

Specification
CSS Pseudo-Elements Module Level 4
# first-line-pseudo

BCD tables only load in the browser

with JavaScript enabled. Включите JavaScript для просмотра данных.
  • :: первая буква

Последнее изменение: , участниками MDN

::first-line | CSS-трюки - CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Псевдоэлемент ::first-line предназначен для применения стилей к первой строке элемента. Представьте абзац длиной в несколько строк (как этот!). :: первая строка позволяет вам стилизовать первую строку текста. Вы можете использовать его, чтобы сделать его больше или установить его маленькими заглавными буквами в качестве стилистического выбора. Объем текста, на который нацелен этот псевдоэлемент, зависит от нескольких факторов, таких как длина строки, ширина области просмотра, размер шрифта, расстояние между буквами, расстояние между словами. Как только строка обрывается, текст после этого уже не выделяется. Обратите внимание, что здесь не выбран фактический элемент DOM (таким образом, «псевдоэлемент»).

Этот псевдоэлемент работает только с элементами блочного уровня (когда дисплей устанавливается либо на блок , встроенный блок , заголовок таблицы , таблица-ячейка ). Если установлено для встроенного элемента, ничего не происходит, даже если внутри этого встроенного элемента есть разрыв строки.

Также обратите внимание, что не все свойства можно использовать в наборе правил, содержащем ::first-line . В основном:

 .element::first-line {
    стиль шрифта: ...
    вариант шрифта: ...
    вес шрифта: ...
    размер шрифта: ...
    семейство шрифтов: ...
    высота линии: ...
    цвет: ...
    интервал между словами: ...
    Межбуквенное расстояние: ...
    текстовое оформление: ...
    преобразование текста: ...
    фоновый цвет: ...
    фоновая картинка: ...
    фоновая позиция: ...
    фон-повтор: ...
    размер фона: ...
    фоновое вложение: ...
} 

Официальная спецификация CSS говорит, что пользовательские агенты могут разрешать другие свойства, если они считают нужным:

UA также могут применять другие свойства.

Несколько слов о специфичности

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

  • 1-й абзац становится серым с помощью селектора тегов
  • 2-й абзац становится серым с помощью селектора класса
  • 3-му абзацу присваивается серый цвет с помощью селектора ID
  • 4-му абзацу присваивается серый цвет через !important bash

Это связано с тем, что псевдоэлемент обрабатывается как дочерний элемент, а не просто часть родительский элемент. Таким образом, правила, которые вы применяете к нему, предназначены только для него, родительские правила могут просто каскадироваться на него.

Кроме того, попробуйте изменить размер окна браузера, чтобы увидеть, как ведет себя псевдоэлемент при изменении ширины области просмотра.

Нет :last-line или :nth-line, хотя это было бы здорово.

Browser support

Desktop
Chrome Firefox IE Edge Safari
9 3.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *