Применение специальных стилей к первой букве

Первый псевдоэлемент участвует в стилевом оформлении первой буквы блочного элемента:

p:first-letter {color: red;}

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

h2:first-letter {font-size: 200%;}

Как я говорил, это правило заставляет агент пользователя реагировать на фиктивный элемент, содержащий первую букву каждого элемента h2. Это могло бы выглядеть примерно так:

This is an h2 element



Стили :first-letter применяются только к содержимому фиктивного элемента, показанного в примере. Элемента нет в исходной разметке документа. Он создается агентом пользователя на лету и нужен для того, чтобы применить стиль :first-letter к соответствующему блоку текста. Иначе говоря, – это псевдо-элемент. Помните: вам не надо добавлять никаких новых тегов. Агент пользователя все сделает за вас.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Выбор дочерних элементов
Выбор конкретного атрибута
Выбор между селектором классов и селектором идентификаторов
Выбор на основании конкретного значения атрибута
Выбор первого дочернего элемента

Вернуться в раздел: CSS / 2. Селекторы