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

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

С помощью псевдоклассов можно выбрать элементы, не используя для этого атрибут class.

Например, код ниже выбирает только первый абзац.

/* вместо */
p.first { ... }

/* можно использовать */
p:first-child { ... }

Или более используемый пример, состояние ссылки при её наведении.

/* вместо */
a.hover { ... }

/* можно использовать */
a:hover { ... }

То есть псевдокласс используется вместо присвоения классов к элементам. Отсюда и само название псевдокласс, которая переводится как «ложный класс».

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

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

<p>Html и CSS</p>

В данном коде надо выбрать только первую букву. Вместо того, чтобы создавать новый элемент <span>H</span>, можно воспользоваться псевдоэлементом first-letter.

p::first-letter { ... }

Т.е. псевдоэлемент first-letter как бы создаёт элемент <span>H</span> и применяет к нему стили. Отсюда и слово псевдоэлемент, т.е. «ложный элемент». Наиболее яркий пример псевдоэлемент after, который создаёт новый элемент после текущего.

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