Псевдо-классы и псевдо-элементы

Псевдо-классы и псевдо-элементы решают группу задач, связанных с выбором конкретного элемента списка или с изменением поведения объекта в связи с возникновением какого-либо события. Здесь мы разберём лишь часть из существующих псевдо-элементов и псевдо-классов, а больше вы всегда сможете узнать здесь: Псевдо-классы и псевдо-элементы

Псевдо-классы

Псевдо-классы представляют собой ключевое слово, начинающееся с двоеточия (:), которое добавляют после селектора:

selector:pseudo-class { ... }

Ниже приведён список наиболее популярных псевдо-классов

• :hover
  Срабатывает при наведении курсора на элемент
• :visited
  Позволяет выбрать посещённые ссылки
• :active
  Срабатывает при нажатии на элемент, но может быть применим только к элементам<a> и<button>
• :focus
  Срабатывает при получении элементом фокуса. Работает только для элементов<a>,<button>,<input>,<textarea>
• :checked
  Срабатывает для элемента<input type="checkbox"> или <input type="radio">. Позволяет применять стили в том случае, если на элементе стоит отметка
• :disabled
  Срабатывает, если элемент имеет атрибутdisabled, к примеру, элемент <input type="..." disabled>или<button disabled>
• :required
  Срабатывает, если элемент имеет атрибутrequired, всегда для элемента <input required>
• :first-child
  Позволяет выбрать первый элемент в своем родителе
• :last-child
  Позволяет выбрать последний элемент в своем родителе
• :nth-child
  Позволяет выбирать один или более элементов, основываясь на их позиции среди группы соседних элементов.
  Примеры:
  ul li:nth-child(2) выберет второй элемент
  ul li:nth-child(2n) выберет каждый второй элемент (через один)
  ul li:nth-child(3n+1) выберет 1,4,7,9 ... и так далее, через два элементы.
• :nth-last-child
  Точно так же, но счёт идёт с последнего элемента к первому. К примеру, для выбора предпоследнего элемента списка: ul li:nth-last-child(2)
• :not()
  "НЕ". Это функция, принимающая селектор внутрь скобок. К примеру, нам нужно найти все ссылки, у которых нет атрибута target:
  a:not([target])
  Ещё пример: требуется найти все статьи, не имеющие класса .top:
  article:not(.top)

Псевдо-элементы

Псевдо-элементов значительно меньше, а отличить их можно по двойному двоеточию (::), которое добавляется к селектору.

selector::pseudo-element { ... }

Браузерами поддерживается и устаревший синтаксис с одинарным двоеточием.

Псевдо-элементы ведут себя как элементы, то есть, у них есть размеры, они могут быть спозиционированы, их видно. Псевдо-классы же мы увидеть не могли,могли лишь только увидеть их влияние на элементы. Рассмотрим псевдо-элементы подробнее:

• ::before
  Создаёт псевдо-элемент, который будет являться первым потомком элемента. Не работает без свойства content: '';
a::before{ content: '♥'; } В этом примере, перед каждой ссылкой на сайте будет добавляться сердечко.
• ::after
  Работает точно так же, как и ::before, но псевдо-элемент создаётся в самом конце и будет являться последним потомком.