Псевдоэлемент ::first-line применяет стиль к первой строке внутри блочного контейнера. Он не выбирает такие строчные элементы, как изображения или строчные таблицы.
Следующие CSS свойства могут быть использованы для применения стиля к ::first-line:
- font свойства
- background свойства
- text-decoration, text-transform, letter-spacing, word-spacing, color.
::first-letter наследует примененные стили, используя ::first-line. Если использованы оба элемента, стили, указанные псевдоэлементом ::first-letter, переопределяют те стили, примененные псевдоэлементом ::first-line.
Псевдоэлемент ::first-line может быть использован с одним двоеточием :first-line, который также поддерживается всеми браузерами.
Версия
CSS1
Синтаксис
::first-line {
css declarations;
}Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
p::first-line {
color: #85d6de;
text-transform: uppercase;
}
</style>
</head>
<body>
<h2>Пример селектора ::first-line</h2>
<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
</body>
</html>Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| 4.0+ | 12.0+ | 2.0+ | 3.1+ | 10.0+ |
Практикуйте свои знания
Какой из нижеприведенных вариантов является верным использованием псевдоэлемента ::first-line в CSS?
Правильный!
Неправильно!