Какие знаешь современные псевдоклассы?

# Современные CSS псевдоклассы

Псевдоклассы — это ключевые слова, добавляемые к селекторам для изменения стиля элементов в зависимости от их состояния или позиции в DOM. Рассмотрю наиболее используемые в современной веб-разработке.

Интерактивные состояния

:hover — применяется при наведении мыши:

a:hover {
  color: blue;
  text-decoration: underline;
}

:focus — когда элемент в фокусе (важно для доступности):

input:focus {
  outline: 2px solid blue;
  background-color: #f0f0f0;
}

:active — при клике:

button:active {
  transform: scale(0.95);
}

:focus-visible — фокус только с клавиатуры (важно для accessibility):

button:focus-visible {
  outline: 2px solid orange;
}

Состояния формы

:checked — для отмеченных чекбоксов и радиокнопок:

input[type="checkbox"]:checked {
  accent-color: green;
}

:disabled — для отключенных элементов:

input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

:enabled — для активных элементов формы:

input:enabled {
  cursor: text;
}

:invalid — для некорректных значений в форме:

input:invalid {
  border-color: red;
}

:valid — для корректных значений:

input:valid {
  border-color: green;
}

Состояния элементов

:empty — для пустых элементов:

div:empty {
  display: none;
}

:visited — для посещённых ссылок:

a:visited {
  color: purple;
}

Селекторы по позиции

:first-child — первый элемент среди соседей:

li:first-child {
  font-weight: bold;
}

:last-child — последний элемент:

li:last-child {
  border-bottom: none;
}

:nth-child() — элемент по индексу:

tr:nth-child(2n) {
  background-color: #f0f0f0;
}

:nth-of-type() — элемент по типу:

p:nth-of-type(3) {
  color: red;
}

:only-child — единственный дочерний элемент:

p:only-child {
  margin: 0;
}

Современные функциональные псевдоклассы

:is() — упрощает селекторы (согласование по множеству селекторов):

/* Вместо: h1 > a, h2 > a, h3 > a */
:is(h1, h2, h3) > a {
  color: blue;
}

:where() — похож на :is(), но с нулевой специфичностью:

:where(.nav, .menu) a {
  color: black;
}

:not() — исключает элементы:

button:not(:disabled) {
  cursor: pointer;
}

:has() — проверяет наличие потомков (очень мощный селектор):

/* Стилизация родителя, если он содержит p */
div:has(> p) {
  padding: 10px;
}

Специальные состояния

:root — корневой элемент (обычно html):

:root {
  --primary-color: #3498db;
  font-size: 16px;
}

:target — элемент, на который указывает якорь URL:

#section:target {
  background-color: yellow;
}

:in-range и :out-of-range — для input[type="range"]:

input:in-range {
  border-color: green;
}

Поддержка и совместимость

Большинство современных псевдоклассов поддерживаются во всех браузерах. Исключения:

• :has() — недавно добавлена, проверяй caniuse.com
• :focus-visible — поддержка во всех современных браузерах
• :is() — хорошая поддержка во всех браузерах

Эти псевдоклассы критичны для создания интерактивных и доступных веб-сайтов без лишнего JavaScript.