Псевдоэлементы и псевдоклассы в CSS

Опубликовано: 2020-08-20

Каждый раз, когда нам нужно изменить стиль CSS в нашем веб-сайте, мы с Тони играем в «камень-ножницы-бумага», чтобы увидеть, кто из «счастливчиков» выполнит эту задачу. Как так получилось, спросите вы? Что ж, в течение долгого времени работа с HTML и CSS была головной болью**, так как исправление чего-то на одном конце ломало множество вещей в других местах.

Комическая гифка, показывающая, насколько сложен CSS
Нельзя не восхищаться и не восхищаться работой, проделанной фронтенд-разработчиками.

Но правда в том, что CSS сильно изменился за последние годы, и если вы воспользуетесь его новыми функциями, вам будет намного проще правильно и эффективно оформить и оформить свой веб-сайт. На мой взгляд, два больших достижения в CSS, которые мы недавно видели, — это включение, во-первых, flex (для разметки строк и столбцов) и, чуть позже, grid (для разметки сеток).

В CSS полно функций, которые могут упростить вашу работу . И сегодня мы увидим два из них: псевдоэлементы и псевдоселекторы.

Как «создавать контент» с помощью псевдоэлементов CSS

Псевдоэлементы CSS — это механизм доступа к частям HTML, которые не имеют связанного узла в DOM . Например, «частью нашего документа» может быть «первая строка абзаца», «первая буква абзаца» или «выбор, сделанный пользователем», ни один из которых не имеет связанного узла. Но псевдоэлементы также являются способом создания контента до или после существующего элемента с помощью CSS.

Псевдоэлементы, доступные в CSS3:

  • ::before : добавляет содержимое перед элементом
  • ::afte r: добавляет содержимое после элемента
  • ::first-letter : выбирает первую букву «блочного» элемента (то есть тех, чье свойство display установлено в block , inline-block , table-cell и т. д.)
  • ::first-line : выбирает первую строку «блочного» элемента
  • ::selection : относится к частям документа, которые выбрал посетитель.

Как видите, псевдоэлементы начинаются с пары двоеточий ( :: ). И вот как вы их используете.

Выбор частей документа

Предположим, например, что мы хотим, чтобы в определенном абзаце первая строка была выделена оранжевым цветом и подчеркнута. Ну, просто сделайте что-то вроде этого:

 p::first-line { color: orange; text-decoration: underline; }

и вы получите правильный результат:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis leo in turpis interdum, at pharetra velit elementum. Nam eget lacus sed lacus dictum scelerisque. Proin porta ligula sed mi semper, vel interdum massa auctor. Pellentesque et massa congue, tincidunt Erat ac, tincidunt elit. Сед ак долор метус. Nam commodo metus sed ligula consectetur interdum. Curabitur odio est, tempor id egestas nec, aliquam at nisl.

Если, с другой стороны, вы хотите изменить выбор, подход точно такой же. Просто имейте в виду, что количество свойств CSS, которые мы можем настроить, ограничено color , background , cursor и outline :

 p::selection { background: #21acde; color: white; }

Вы можете увидеть результат в следующем абзаце, если вы выбрали что-то:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis leo in turpis interdum, at pharetra velit elementum. Nam eget lacus sed lacus dictum scelerisque. Proin porta ligula sed mi semper, vel interdum massa auctor. Pellentesque et massa congue, tincidunt Erat ac, tincidunt elit. Сед ак долор метус. Nam commodo metus sed ligula consectetur interdum. Curabitur odio est, tempor id egestas nec, aliquam at nisl.

Создание нового контента

У вас также есть возможность динамически добавлять контент на свою страницу. Например, представьте, что у вас есть такой список элементов:

 <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul>

Обычно списки выглядят так:

  • Один
  • Два
  • Три

но вы можете настроить его так, чтобы каждый элемент отделялся от следующего синей полосой:

  • Один
  • Два
  • Три

используя ::after для каждого элемента в списке следующим образом:

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; }

С помощью ::before и ::after вы можете делать много замечательных вещей. Например, вы можете комбинировать несколько фонов в одном элементе, отображать URL-адреса ссылок при печати страницы, упорядочивать плавающие элементы, маркировать блоки, украшать типографику и так далее.

Как более точно применять стили с помощью псевдоклассов

Псевдоклассы CSS позволяют нам выбирать элементы нашего веб-сайта, которые либо находятся в определенном состоянии , либо имеют какое-то особое свойство , которое отделяет их друг от друга. Самый распространенный (и самый старый) пример — псевдоклассы ссылок:

  • a:link - это те ссылки, которые вы еще не посещали
  • a:visited — это любая ссылка, которую вы уже посетили
  • a:hover — это ссылка, на которую вы наводите курсор
  • a:focus соответствует ссылке, которая в данный момент находится в фокусе (что похоже на наведение, но с использованием клавиатуры вместо мыши)
  • a:active соответствует ссылке, по которой вы сейчас нажимаете

В CSS около 60 псевдоклассов. Подавляющее большинство из них позволяют вам фильтровать элементы на основе их состояния (например, вы можете выбрать элементы только для чтения, используя, как вы уже догадались, псевдокласс :read-only ). Но есть несколько интересных «исключений» из этого правила, о которых стоит упомянуть.

Но прежде чем мы это сделаем, небольшое замечание: обратите внимание, как вы можете отличить псевдокласс от псевдоэлемента, потому что первый начинается с одного двоеточия ( : , а второй — с двух ( :: .

Выбор дочерних элементов элемента с использованием псевдоклассов «дочерний» и «типа»

Помните пример, который мы видели ранее, где мы добавили вертикальную черту для разделения элементов списка? Что ж, если вы присмотритесь, то увидите, что установленное нами правило не совсем работает:

  • Один
  • Два
  • Три

потому что последний элемент также включает в себя вертикальную черту, хотя этого не должно быть. Если мы хотим удалить его, мы можем сделать что-то вроде этого:

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; } ul li:last-child::after { display: none; }

который работает именно так, как вы себе представляете:

  • Один
  • Два
  • Три

Как видите, все, что мы делаем, это добавляем новое правило, используя псевдокласс :last-child , который позволяет нам выбрать последний элемент li в нашем списке ul и, как только он у нас появится, скрыть его псевдоэлемент ::after со свойством display равным none .

Особенности * -child и * -of-type

Существует три варианта псевдокласса *-child :

  • :first-child соответствует первому дочернему элементу (ага!)
  • :last-child делает то же самое, но с последним
  • :nth-child(i) , как вы уже догадались, выбирает i -й элемент (например, :nth-child(2) соответствует второму дочернему элементу)

Итак, давайте посмотрим и подумаем о следующем CSS:

 li strong:first-child { color: orange; text-decoration: underline; }

и следующий фрагмент HTML:

 <ol> <li>Lorem <strong>ipsum</strong> dolor <strong>sit</strong> amet.</li> <li><em>Lorem</em> <strong>ipsum</strong> dolor <strong>sit</strong> amet.</li> <li>Lorem <strong>ipsum</strong> dolor <em><strong>sit</strong></em> amet.</li> </ol>

Как ты думаешь, что произойдет? В принципе кажется, что во всех трех случаях слово ipsum будет оранжевым и подчеркнутым, потому что ipsum — первый strong дочерний элемент в каждом элементе li , верно? Давайте посмотрим:

  1. Lorem ipsum dolor sit amet.
  2. Lorem ipsum dolor sit amet.
  3. Lorem ipsum dolor sit amet.

Ну, достаточно близко. Можете ли вы догадаться, почему это произошло?

Псевдокласс :first-child применяется к первому дочернему элементу. В первом предложении ipsum — это первый strong тег, который оказывается первым потомком. Во втором предложении первым дочерним узлом является em (со словом Lorem ), а затем следует strong тег со словом ipsum . Следовательно, этот сильный тег не является «первым потомком». Наконец, в третьем предложении есть два тега, которые соответствуют нашему правилу: ipsum (это как первое предложение) и sit . Обратите внимание, что sit — strong тег, который является первым дочерним элементом родительского тега ( em ).

Итак, что, если мы хотим подчеркнуть первый strong тег каждого элемента li ? Ну, мы должны использовать другой псевдокласс и убедиться, что мы сопоставляем только элементы, которые являются прямыми дочерними элементами li :

 li > strong:first-of-type { color: orange; text-decoration: underline; }

который работает так, как ожидалось:

  1. Lorem ipsum dolor sit amet.
  2. Lorem ipsum dolor sit amet.
  3. Lorem ipsum dolor sit amet.

Довольно круто, да? Опять же, есть три варианта этого псевдокласса:

  • x:first-of-type соответствует первому родственному элементу, тип которого равен x
  • x:last-of-type выбирает последний
  • x:nth-of-type(i) соответствует i -му родственному элементу, тип которого равен x

Выбор противоположности с помощью :not

Наконец, псевдокласс, о котором я хотел поговорить с вами сегодня, это :not . :not — это псевдокласс, который соответствует тем элементам, которые не соответствуют определенному свойству. Например, давайте вернемся к нашему предыдущему примеру:

  • Один
  • Два
  • Три

Чтобы решить проблему полосы, которая появляется в последнем элементе, мы в основном (1) добавили полосу ко всем элементам li и (2) перезаписали правило в последнем элементе и скрыли его:

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; } ul li:last-child::after { display: none; }

Но это не кажется оптимальным, не так ли? Мы ошиблись с первым элементом, и нам нужно исправить наши стили в последнем элементе. На самом деле мы хотели добавить полосу ко всем элементам, кроме последнего…

Что ж, мы можем добиться этого, применив псевдокласс :not и объединив его с :last-child :

 ul li { display: inline; } ul li:not(:last-child)::after { color: #21acde; content: " | "; display: inline-block; }

который применяет стиль ко всем элементам li , которые не являются последним элементом ( :not(:last-child) ), что прекрасно описывает нашу цель и, таким образом, решает нашу проблему:

  • Один
  • Два
  • Три

В итоге

Псевдоэлементы и псевдоклассы CSS позволяют нам быть более точными при доступе к различным элементам нашего веб-сайта. С их помощью мы можем писать более краткие и конкретные правила CSS, что упрощает его обслуживание и позволяет избежать необходимости постоянно перезаписывать общие правила для конкретных случаев.

Надеюсь, вам понравился этот пост, и если да, то поделитесь им с друзьями!

Избранное изображение JFL на Unsplash.