Псевдоклассы выбирают обычные элементы, но при определенных условиях, например, когда их положение относительно братьев и сестер или когда они находятся в определенном состоянии. Вот список псевдоклассов в CSS3:
Динамические псевдоклассы
:link:visited:hover:active:focus
Псевдоклассы состояния элемента пользовательского интерфейса
:enabled:disabled:checked
Структурные псевдоклассы
:first-child:nth-child(n):nth-last-child(n):nth-of-type(n):nth-last-of-type(n):last-child:first-of-type:last-of-type:only-child:only-of-type:root:empty
Другие псевдоклассы
:not(x):target:lang(language)
Псевдоэлементы
Псевдоэлементы фактически создают новые элементы, которые не указаны в разметке документа, и с ними можно манипулировать так же, как с обычным элементом. Это дает огромные преимущества для создания крутых эффектов с минимальной разметкой, а также значительно помогает сохранить представление документа вне HTML и в CSS, где ему и место.
С введением CSS3 разница между псевдоклассами и псевдоэлементами стала намного более очевидной, так как теперь стандартом является использование двойного двоеточия (::) для псевдоэлементов, однако мы должны использовать одно двоеточие до тех пор, пока некоторые браузеры не будут поэтапно из (я смотрю на вас IE8 и ниже). Вот список псевдоэлементов в CSS3:
::before::after::first-letter::first-line
