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

Псевдокласс - это ключевое слово, которое указывается после селектора через знак двоеточия ‘:’. Псевдоклассы позволяют более гибко находить нужные элементы по определенному паттерну или состоянию. Их можно разделить на несколько категорий.

Псевдоклассы html структуры

Структурные псевдоклассы позволяют задать стили элементам на одном уровне вложенности в зависимости от их расположения внутри родительского элемента.

:first-child - первый дочерний элемент (https://codepen.io/Yury_P/pen/gOwwKLJ)

:last-child - последний дочерний элемент (https://codepen.io/Yury_P/pen/ZEppRLe)

:first-of-type - первый дочерний элемент того же типа (https://codepen.io/Yury_P/pen/dyppKWg)

:last-of-type - последний дочерний элемент того же типа (https://codepen.io/Yury_P/pen/GRjjGEa)

:only-child - единственный дочерний элемент (https://codepen.io/Yury_P/pen/ExggRbQ)

:only-of-type - единственный дочерний элемент того же типа (https://codepen.io/Yury_P/pen/eYddKMG)

:nth-child() - находит элементы по паттерну, имеет несколько вариантов указания значений.

• Ключевые слова: (https://codepen.io/Yury_P/pen/XWjjYoq)
  odd - все нечетные элементы
  even - все четные элементы
• Функциональная запись: (https://codepen.io/Yury_P/pen/BaLLPoQ)
  Формула: An+B
  A - (число) указывает на периодичность
  B - (число) указывает стартовый элемент
  n - счетчик

Для выбора дочернего элемента на конкретной позиции нужно указать одно число с нужным порядковым номером.

:nth-last-child() - работает аналогично псевдоклассу :nth-child(), только в обратном порядке, начиная с конца.  (https://codepen.io/Yury_P/pen/JjRbKXx)

:nth-of-type() - работает аналогично псевдоклассу :nth-child(), только с учетом типа элемента (https://codepen.io/Yury_P/pen/MWjbbgK)

:nth-last-of-type() - работает аналогично псевдоклассу :nth-of-type(), только в обратном порядке, начиная с конца. (https://codepen.io/Yury_P/pen/bGwBBNy)

:root - указывает на корневой элемент документа html, но его специфичность больше, чем у селектора html.

:not() - псевдокласс отрицания, указывает на все элементы кроме указанного (https://codepen.io/Yury_P/pen/ExgNNRQ)

:empty - указывает на пустой элемент, без других элементов или текста (https://codepen.io/Yury_P/pen/eYdBBQG)

Псевдоклассы действий

Псевдоклассы действий позволяют задать стили элементу с которым пользователь взаимодействует.

:hover - срабатывает при наведении курсора на элемент (https://codepen.io/Yury_P/pen/zYKooNz)

:focus - срабатывает при фокусировки элемента (https://codepen.io/Yury_P/pen/abmBBWV)

:active - срабатывает в момент активации элемента пользователем (обычно момент от нажатия кнопки мыши и до момента ее отпускания) (https://codepen.io/Yury_P/pen/OJRbbje)

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

:link - указывает на ссылки, которые еще не были посещены

:visited - указывает на посещенные ссылки

Если селектору нужно задать несколько псевдоклассов, некоторые нужно задавать в определенном порядке, псевдоклассы :link, :visited, :hover, :active (сокращенно LVHA) - нужно задавать в данном порядке, иначе один псевдокласс может перезаписать другой.

Псевдоклассы для элементов ввода

:optional - указывает на элементы input, которые не обязательны к заполнению (без атрибута required) (https://codepen.io/Yury_P/pen/KKgNawq)

:required - указывает на элементы input, которые обязательны к заполнению (указан атрибут required) (https://codepen.io/Yury_P/pen/mdrORey)

:valid - указывает на элементы input и form, которые прошли валидацию (https://codepen.io/Yury_P/pen/oNzYBdN)

:invalid - указывает на элементы input и form, которые не прошли валидацию (https://codepen.io/Yury_P/pen/LYRbxGa)

:checked - указывает на элементы input (type=”radio / checkbox”) и option (внутри тега select), которые выбраны. (https://codepen.io/Yury_P/pen/gOwLxQK)

:default - указывает на элементы button, options, input (type=”radio / checkbox”), которые установленные по умолчанию (https://codepen.io/Yury_P/pen/mdrORWe)

:read-only - указывает на элементы, которые недоступные для редактирования (https://codepen.io/Yury_P/pen/zYKNqbP)

:read-write - указывает на элементы, которые доступные для редактирования, например input (type=”text”) (https://codepen.io/Yury_P/pen/RwGKadd)

:in-range - указывает на элементы, значения которых находятся в допустимом диапазоне, который для них указан (https://codepen.io/Yury_P/pen/qBaqRjG)

:out-of-range - указывает на элементы, значения которых находятся вне допустимого диапазона, который для них указан (https://codepen.io/Yury_P/pen/oNzYBeK)

:enabled - указывает на элементы, которые включены (https://codepen.io/Yury_P/pen/qBaqRxe)

:disabled - указывает на элементы, которые отключены (https://codepen.io/Yury_P/pen/bGwBrOz)

Другие псевдоклассы

:target - указывает на целевой элемент.

Например, HTML элемент с id="block" будет целевым элементом, если в адресе сайта будет происходить переход к этому элементу по идентификатору (http://site.com/#block).

:any-link - указывает на элементы, которые используют псевдоклассы :link и :visited (a, link, area с указанным атрибутом href)

:lang() - позволяет задать некоторые настройки в зависимости от языка, например задать разные кавычки для разных языков (https://codepen.io/Yury_P/pen/dypOOEr)

Существует еще некоторое количество псевдоклассов которые находятся в экспериментальной стадии или на стадии рабочего черновика. Их использование на реальных проектах крайне не рекомендуется, поддержка у браузеров может быть очень низкой или отсутствовать вовсе. Поддержку псевдокласса можно проверить на сайте https://caniuse.com/