Псевдоэлемент ::first-letter добавляет стиль к первой букве первой строки внутри блочного контейнера. Он не выбирает такие строчные элементы, как изображения или строчные таблицы.
Псевдоэлемент ::first-letter не распознает знаки препинания, которые предшествуют или следуют сразу за первой буквой. Он также применяется в случае, когда первым символом является цифра.
Следующие CSS свойства могут быть использованы для применения стиля к ::first-letter:
- font свойства
- margin свойства
- padding свойства
- border свойства
- background свойства
- text-decoration, text-transform, letter-spacing, word-spacing, float, vertical-align, color, line-height, text-shadow, box-shadow свойства.
Спецификация CSS3 представила ::first-letter, чтобы различать псевдоклассы от псевдоэлементов.
Версия
CSS1
Синтаксис
::first-letter {
css declarations;
}Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
p::first-letter {
font-size: 35px;
color: #1c87c9;
}
</style>
</head>
<body>
<h2>Пример селектора ::first-letter</h2>
<p> Lorem Ipsum - это текст-"рыба"...</p>
</body>
</html>Рассмотрим другой пример, где псевдоэлемент ::first-letter принимает знак препинания и цифру за первую букву:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
p::first-letter {
font-size: 35px;
color: #1c87c9;
}
</style>
</head>
<body>
<h2>Пример селектора ::first-letter</h2>
<p>-Lorem Ipsum - это текст-"рыба"...</p>
<p>1Lorem Ipsum - это текст-"рыба"...</p>
</body>
</html>Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| 9.0+ | 12.0+ | 3.5+ | 5.1+ | 12.1+ |
Практикуйте свои знания
Какие свойства поддерживает псевдоэлемент ::first-letter в CSS?
Правильный!
Неправильно!