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

Псевдоклассы

Псевдоклассы начинаются с одиночного двоеточия (:). Они используются для стилизации элемента в определенном состоянии.

Основные псевдоклассы:

:hover - стилизует элемент при наведении курсора мыши.
:active - стилизует элемент во время клика (активации).
:focus - стилизует элемент, который в данный момент находится в фокусе (например, после перехода по ссылке или клика на поле ввода).
:visited - стилизует посещенную ссылку.
:link - стилизует непосещенную ссылку.
:first-child - стилизует первый дочерний элемент своего родителя.
:last-child - стилизует последний дочерний элемент своего родителя.
:nth-child(n) - стилизует n-й дочерний элемент своего родителя. n может быть числом, ключевым словом (even, odd) или выражением (2n+1).
:nth-last-child(n) - стилизует n-й дочерний элемент своего родителя, отсчитывая с конца.
:not(selector) - стилизует элементы, которые не соответствуют указанному селектору.

/* Пример использования псевдоклассов */
a:hover {
  color: blue; // Изменение цвета ссылки при наведении
}

input:focus {
  border-color: green; // Изменение рамки поля ввода при фокусе
}

li:first-child {
  font-weight: bold; // Стилизация первого элемента списка
}

Псевдоэлементы

Псевдоэлементы начинаются с двойного двоеточия (::). Они используются для стилизации определенной части элемента или для вставки генерируемого контента до или после содержимого элемента.

Основные псевдоэлементы:

::before - вставляет генерируемый контент перед содержимым элемента. Часто используется с свойством content.
::after - вставляет генерируемый контент после содержимого элемента. Также требует свойство content.
::first-letter - стилизует первую букву текстового блока.
::first-line - стилизует первую строку текстового блока.
::selection - стилизует часть элемента, которая выделена пользователем.

/* Пример использования псевдоэлементов */
p::first-letter {
  font-size: 2em; // Увеличение первой буквы параграфа
  font-weight: bold;
}

h2::after {
  content: " ---"; // Добавление текста после заголовка
  color: gray;
}

mark::selection {
  background-color: yellow; // Изменение фона выделенного текста
  color: black;
}

Исторически, псевдоклассы использовали одиночное двоеточие (:) для обратной совместимости с CSS2.1, в то время как псевдоэлементы в CSS3 стали использовать двойное двоеточие (::) для лучшего различия. Рекомендуется использовать двойное двоеточие для псевдоэлементов в современном коде.

Таблица сравнения:

Характеристика	Псевдокласс	Псевдоэлемент
Синтаксис	`:selector`	`::selector`
Назначение	Состояние элемента	Часть элемента или генер. контент
Примеры	`:hover`, `:focus`, `:first-child`	`::before`, `::after`, `::first-letter`

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