Использование селектора псевдоэлемента
2 июля 2017 | Опубликовано в css | 1 Комментарий »
Селекторы псевдоэлементов отличаются от селекторов псевдоклассов тем, что последние влияют на элементы, когда те находятся в определенных состояниях, например, запись a:hover задает внешний вид ссылок, когда на них наведен указатель мыши. Селекторы псевдоэлементов контролируют внешний вид частей содержимого элемента, таких как первая строка или первая буква абзаца.
В спецификации CSS3 W3C сформулировал правило, утверждающее, что селекторы псевдоэлементов должны начинаться с двух двоеточий, чтобы отличать их от селекторов псевдоклассов, которые начинаются всего с одного двоеточия. Теоретически современные версии браузеров должны соблюдать это правило, и почти все они это делают, кроме браузеров Internet Explorer версий с 6 по 8. Еще в теории браузеры должны поддерживать и вариант с одним двоеточием перед селекторами псевдоэлементов, как было в спецификациях CSS1 и CSS2, но некоторые версии браузеров не делают этого. Так что мы рекомендуем придерживаться рекомендаций W3C.
В описании селекторов добавлены ссылки на соответствующие уроки.
Список селекторов псевдоэлементов
| Селектор псевдоэлемента | Цель |
| ::first-line | Выбирает первую строку содержимого элемента. Обычно применяется к элементам абзацев, например, p::first-line. Полезен для создания эффекта первой строки вступления. |
| ::first-letter | Выбирает первую букву содержимого элемента. Обычно применяется к элементам абзацев или заголовков, например, p::first-letter. Полезен для создания эффекта буквицы или инициала. |
| ::before | Вставляет содержимое до выбранного. Имеет много областей применения, например: создание автоматически добавляемых кавычек, разделителей для ссылок в горизонтальном меню и многого другого. |
| ::after | Делает то же, что и селектор псевдоэлемента ::before, имеет те же области применения, но создает содержимое после выбранного. |
| ::selection | Изменяет внешний вид выбранного текста. |
За дополнительной информацией можно обратиться к сайту design shack, на котором находится отличный урок с примерами практического использования селекторов псевдоэлементов ::before и ::after.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Комментарии
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
549