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

Question

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

YeaHub · Accepted Answer

В CSS есть два схожих по синтаксису, но разных по назначению механизма — псевдоклассы и псевдоэлементы.ОпределениеПсевдокласс описывает состояние или положение элемента.Псевдоэлемент описывает виртуальную часть элемента, которой нет в HTML.Основные отличияРазличие между ними проявляется в назначении:ПсевдоклассыРаботают с существующим элементомРеагируют на состояние или контекстПримеры: :hover, :focus, :first-childПсевдоэлементыСоздают виртуальную часть элементаИспользуются для стилизации фрагментовПримеры: ::before, ::after, ::first-letterПримерa:hover {
  color: red;
}

p::first-letter {
  font-size: 2em;
}
ВыводПсевдоклассы отвечают за состояние элемента, а псевдоэлементы — за его структуру. Понимание разницы важно для корректной архитектуры CSS.