Псевдоклассы выбирают обычные элементы, но при определенных условиях, например, когда их положение относительно братьев и сестер или когда они находятся в определенном состоянии. Вот список псевдоклассов в 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