Псевдокласс — это «элемент прямо сейчас в таком состоянии»

Наводите, кликайте, ходите по полям клавишей Tab.

:hover и :active

Состояние живёт, пока курсор над элементом. Скрипт не нужен.

:focus

Пройдите по полям клавишей Tab с галкой и без.

:checked

Оформление — чистый CSS, состояние хранит чекбокс.

:nth-child(odd)

первая строка
вторая строка
третья строка
четвёртая строка
пятая строка

Полосатая таблица без лишних классов.

:disabled и :required

Состояние задаёт разметка, вид — стили.

::before и ::after

Кавычка и стрелки нарисованы стилями. В разметке их нет.

  • псевдоэлемент — не узел DOM
  • без content он не появится

Двоеточий два — чтобы отличать от псевдокласса.