Что такое псевдокласс в CSS?

Что такое псевдокласс в CSS?

Псевдокласс в CSS — это ключевое слово, которое добавляется к селектору для определения специального состояния элемента. Это позволяет стилизовать элементы на основе их динамического состояния или положения в DOM, без использования JavaScript.

Синтаксис

Псевдокласс записывается через одинарное двоеточие (:):

селектор:псевдокласс {
  свойство: значение;
}

/* Пример */
a:hover {
  color: red;
}

Основные псевдоклассы

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

/* При наведении мышки */
a:hover {
  text-decoration: underline;
}

/* При клике (активное состояние) */
button:active {
  transform: scale(0.98);
}

/* Фокус (при табуляции или клике) */
input:focus {
  outline: 2px solid blue;
  border-color: blue;
}

/* Посещённая ссылка */
a:visited {
  color: purple;
}

/* Отключённый элемент */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Элемент в состоянии невалидности */
input:invalid {
  border-color: red;
}

/* Элемент в состоянии валидности */
input:valid {
  border-color: green;
}

2. Структурные псевдоклассы (положение в DOM)

/* Первый дочерний элемент */
li:first-child {
  font-weight: bold;
}

/* Последний дочерний элемент */
li:last-child {
  margin-bottom: 0;
}

/* N-ый элемент (нумерация с 1) */
li:nth-child(2) {
  background: yellow;
}

/* Чётные элементы */
li:nth-child(even) {
  background: #f0f0f0;
}

/* Нечётные элементы */
li:nth-child(odd) {
  background: white;
}

/* Только один дочерний элемент */
p:only-child {
  color: blue;
}

/* Первый элемент своего типа */
h1:first-of-type {
  margin-top: 0;
}

3. Логические псевдоклассы

/* Отрицание (противоположность) */
button:not(:disabled) {
  cursor: pointer;
}

/* Один из нескольких селекторов совпадает */
input:is(.required, .mandatory) {
  border: 2px solid red;
}

/* Все селекторы внутри должны совпадать */
a:where(.active, .current) {
  color: red;
}

4. Целевые псевдоклассы

/* Элемент, на который указывает якорь */
#section1:target {
  background: yellow;
  padding: 10px;
}

5. Форма и интерактивность

/* Пустое поле ввода */
input:empty {
  background: #f9f9f9;
}

/* Элемент, который может быть отмечен */
input:checked {
  background: blue;
}

/* Фокус виден пользователю (не через JavaScript) */
button:focus-visible {
  outline: 3px solid blue;
}

Практические примеры

Пример 1: Навигационное меню

navigation a {
  color: black;
  text-decoration: none;
  padding: 10px 15px;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

navigation a:hover {
  color: white;
  background: #333;
  border-bottom-color: blue;
}

navigation a:active {
  transform: translateY(1px);
}

navigation a:focus-visible {
  outline: 2px solid blue;
  outline-offset: 2px;
}

Пример 2: Форма с валидацией

input {
  border: 2px solid #ccc;
  padding: 8px;
  font-size: 16px;
}

input:focus {
  border-color: blue;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 0, 255, 0.3);
}

input:valid {
  border-color: green;
}

input:invalid {
  border-color: red;
}

input:disabled {
  background: #f0f0f0;
  cursor: not-allowed;
}

Пример 3: Список с чередованием

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

li:nth-child(odd) {
  background: white;
}

li:nth-child(even) {
  background: #f9f9f9;
}

li:first-child {
  border-top: 1px solid #eee;
  border-radius: 4px 4px 0 0;
}

li:last-child {
  border-bottom: 1px solid #eee;
  border-radius: 0 0 4px 4px;
}

li:hover {
  background: #e8f4f8;
}

Пример 4: Кнопка с интерактивностью

button {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

button:hover {
  background: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

button:active {
  background: #003d82;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

button:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

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

Разница между :focus и :focus-visible

/* :focus — срабатывает при любом фокусе (включая клик мышкой) */
input:focus {
  border-color: blue;
}

/* :focus-visible — срабатывает только при фокусе через клавиатуру */
/* Рекомендуется для лучшей доступности */
input:focus-visible {
  outline: 2px solid blue;
}

Новые и прогрессивные псевдоклассы

/* Элемент в режиме чтения/просмотра */
.modal:fullscreen {
  background: black;
}

/* Соответствует состоянию медиа-запроса */
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
  }
}

/* Локальный якорь (новое в CSS) */
#target:target {
  scroll-margin-top: 100px;
}

Разница: псевдокласс vs псевдоэлемент

/* Псевдокласс (:) — состояние элемента */
a:hover { /* При наведении на ссылку */ }

/* Псевдоэлемент (::) — части элемента */
p::first-line { /* Первая строка параграфа */ }
p::before { /* До содержимого */ }

Доступность (Accessibility)

/* Важно: используй :focus-visible вместо :focus */
/* Это улучшает доступность для пользователей клавиатуры */
button {
  /* Не удаляй outline, а стилизируй его красиво */
}

button:focus-visible {
  outline: 3px solid #4A90E2;
  outline-offset: 2px;
}

Браузерная совместимость

/* :hover, :focus, :active — поддержка везде */
a:hover { }

/* :nth-child(), :last-child — поддержка везде */
li:nth-child(2n) { }

/* :focus-visible — поддержка в современных браузерах */
input:focus-visible { }

/* :where() — новое, требует проверки поддержки */
a:where(.active) { }

Вывод: псевдоклассы — это мощный инструмент CSS для стилизации элементов в зависимости от их состояния и положения, позволяющий создавать интерактивные и доступные веб-интерфейсы без JavaScript.