::first-lineПсевдо-элемент предназначен для применения стилей к первой строке элемента. Представьте себе абзац, состоящий из нескольких строк (как этот!). ::first-lineпозволяет стилизовать эту первую строку текста. Вы можете использовать его, чтобы увеличить его, или сделать его маленькими заглавными буквами в качестве стилистического выбора. Объем текста, на который нацелен этот псевдоэлемент, зависит от нескольких факторов, таких как длина строки, ширина области просмотра, размер шрифта, межбуквенный интервал, интервал между словами. Как только строка прерывается, текст после этого больше не выделяется. Обратите внимание, что здесь не выбирается фактический элемент DOM (таким образом, «псевдо» элемент).
Это псевдо-элемент работает только на блочные элементы (когда displayустанавливается либо block, inline-block, table-caption, table-cell). Если он установлен для встроенного элемента, ничего не происходит, даже если внутри этого встроенного элемента есть разрыв строки.
Также обратите внимание, что не все свойства могут использоваться в наборе правил, содержащем ::first-line. По большей части:
.element::first-line ( font-style:… font-variant:… font-weight:… font-size:… font-family:… line-height:… color:… word-spacing:… letter-spacing:… text-decoration:… text-transform:… background-color:… background-image:… background-position:… background-repeat:… background-size:… background-attachment:… )Официальная спецификация CSS сообщает, что пользовательские агенты могут разрешать другие свойства, если им это нравится:
UA могут также применять другие свойства.
Несколько слов о специфике
Следующая демонстрация показывает, как ::first-lineможно игнорировать любую специфичность, даже !important.
- Первый абзац становится серым через селектор тегов.
- Второй абзац становится серым с помощью селектора класса.
- Третий абзац становится серым с помощью селектора идентификатора.
- Четвертый абзац становится серым через! Important bash
Это потому, что псевдоэлемент обрабатывается как дочерний элемент, а не просто часть родительского элемента. Таким образом, правила, которые вы применяете к нему, предназначены только для него, родительские правила могут просто каскадировать к нему.
Также попробуйте изменить размер браузера, чтобы увидеть, как ведет себя псевдоэлемент при изменении ширины области просмотра.
Нет: last-line или: nth-line, хотя это было бы круто.
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Ага | Ага | Ага | 3.5+ (старые) 9+ | 5.5+ (старые) 9+ | Ага | Ага |
Поскольку ::first-lineэто псевдоэлемент, он должен начинаться с двух двоеточий, как указано в CSS2.1. Однако некоторые браузеры поддерживают только синтаксис с одним двоеточием (Internet Explorer 5.5 - 9 и Opera 3.5 - 9).