Суть
Псевдокласс (:…) выбирает элемент в особом состоянии или по структурному условию, без лишнего класса в HTML.
Примеры: :hover, :focus-visible, :checked, :disabled, :nth-child(), :not(), :is(), :has().
.input:focus-visible {
outline: 2px solid #0d9488;
}
li:nth-child(odd) { background: #f1f5f9; }
Специфичность псевдокласса как у класса (кроме нюансов :not/:is/:where).
Итог
Псевдокласс = «когда/какой элемент»; псевдоэлемент = «часть/фрагмент».
