Восемнадцатый урок. Псевдоклассы и псевдоэлементы

Псевдоклассы и псевдоэлементы существуют только совместно с селекторами. Иногда встречается общее наименование — псевдоселекторы.

Псевдокласс используются под разные задачи и указываются в css-коде через двоеточие:

a:hover { стиль }

В данном примере указан псевдокласс :hover, который возникает при наведении курсора мыши на элемент.

a:visited { стиль }

Псевдокласс :visited указывает на уже посещенную ссылку.

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

p::first-letter { стиль }

Псевдоэлемент ::first-letter указывает на первый символ в тексте.

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

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

Обычно на практике использутся очень ограниченный набор псевдоселекторов. Самый распространенный — это :hover и не обязательно к ссылке. Наведение курсора на элемент возможно на любой блок или тэг.

div.my-hover:hover {
	background: green;
}

<div class="my-hover pad10 bg-green100">текст</div>

Из псевдоэлементов встречаются ::after, который добавляет элемент после текста и ::before — аналогично, только перед текстом. У них есть особенность — нужно обязательно указать свойство content:

p.new::after {
  content: "New!";
  font-size: .8em;
  color: red;
  font-weight: bold;
  background: yellow;
  padding: 3px;
  margin: 0 0 0 10px;
}

p.info::before {
  content: "Info";
  font-size: .8em;
  color: white;
  font-weight: bold;
  background: green;
  padding: 3px;
  margin: 0 10px 0 0;
}
<p class="new">текст текст текст текст текст</p>
<p class="info">текст текст текст текст текст</p>

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

Задания

1. Проверьте приведенные примеры на своей странице.

2. Найдите в sass-коде UniCSS (_other.scss) класс .drop-cap («буквица»). Попробуйте на основе этих стилей написать свой аналогичный класс для создания буквицы.

3. В UniCSS для :hover используются классы hover-. Сделайте небольшой пример с использованием этих классов (как минимум цвет и фон).