Псевдо-класс (одно двоеточие :) выбирает элементы на основе их состояния или позиции — то, что невозможно выразить обычным классом, например "при наведении" или "первый потомок."
{ : blue; }
{ : solid; }
{ : (); }
{ : ; }
{ }
{ }
Порядок для ссылок важен (LVHA): :link, :visited, :hover, :active.
li:first-child { } /* first li among its siblings */
li:last-child { } /* last one */
li:nth-child(2) { } /* the 2nd */
li:nth-child(odd) { } /* 1st, 3rd, 5th... — zebra striping */
li:nth-child(3n) { } /* every 3rd */
p:only-child { } /* a p that's the sole child */
:nth-child() мощный — 2n (чётные), 2n+1 (нечётные), 3n (каждый третий), и т. д.
input:required { }
input:invalid { border-color: red; }
:is(h1, h2, h3) { } /* matches any — shortens selector lists */
.card:has(img) { } /* the "parent selector": a card that CONTAINS an img */
:not(.active) { } /* everything except .active */
Псевдо-классы используют одно двоеточие (:hover, состояние); псевдо-элементы используют два (::before, сгенерированная часть). Не путайте их.
Псевдо-классы позволяют стилизовать взаимодействие (hover/focus — критично для удобного, доступного интерфейса) и структуру (полосы, first/last) без дополнительной разметки или JavaScript.
Современные (:has, :is, :focus-visible) решают проблемы, которые раньше требовали JS или повторяющихся селекторов.