В чем отличие псевдоклассов от псевдоэлементов?

В CSS есть два схожих по синтаксису, но разных по назначению механизма — псевдоклассы и псевдоэлементы.

Определение

Псевдокласс описывает состояние или положение элемента.
Псевдоэлемент описывает виртуальную часть элемента, которой нет в HTML.

Основные отличия

Различие между ними проявляется в назначении:

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

   • Работают с существующим элементом

   • Реагируют на состояние или контекст

   • Примеры: :hover, :focus, :first-child

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

   • Создают виртуальную часть элемента

   • Используются для стилизации фрагментов

   • Примеры: ::before, ::after, ::first-letter

Пример

a:hover {
  color: red;
}

p::first-letter {
  font-size: 2em;
}

Вывод

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