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