Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Использование селектора псевдоэлемента

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

Перевод — Дежурка

Смотрите также:




Комментарии