Псевдоклассы: :link, :visited, :hover, :active, :focus и другие

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

Псевдоклассы — это специальные селекторы, которые позволяют стилизовать элементы в определённом состоянии. Например, кнопку при наведении курсора (:hover) или ссылку после посещения (:visited). Это как магические переключатели в CSS! ✨

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

Основные псевдоклассы для ссылок и интерактива 🔗

1. :link — не посещённая ссылка

Стилизует ссылки, по которым пользователь ещё не переходил.

a:link {
  color: deepskyblue;
  text-decoration: none;
}

2. :visited — посещённая ссылка

Меняет стиль ссылок, которые уже были открыты. Из соображений безопасности браузеры ограничивают доступные свойства (например, нельзя изменить font-size).

a:visited {
  color: purple;
}

💡 Лайфхак от Данилы Бежина: порядок важен! Располагайте псевдоклассы в последовательности :link → :visited → :hover → :active → :focus (помните мнемонику LoVe HAte — первые буквы каждого состояния).

3. :hover — при наведении курсора

Срабатывает, когда пользователь наводит курсор на элемент. Работает не только с ссылками!

button:hover {
  background-color: gold;
  transform: scale(1.05);
  transition: all 0.3s ease;
}

4. :active — момент клика

Активируется, когда элемент находится в состоянии нажатия (например, кнопка зажата мышкой).

a:active {
  color: red;
  font-weight: bold;
}

5. :focus — элемент в фокусе

Применяется, когда элемент получает фокус (например, при переходе по Tab или клике). Критически важен для доступности!

input:focus {
  outline: 3px solid orange;
  box-shadow: 0 0 10px rgba(255,165,0,0.5);
}

Псевдоклассы для форм и структуры 🧩

:checked — отмеченные элементы

Идеален для кастомизации чекбоксов и радиокнопок:

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

:disabled и :enabled — состояния элементов формы

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

input:enabled {
  border-color: green;
}

:first-child, :last-child — выбор по позиции

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

li:last-child {
  border-bottom: 2px dashed gray;
}

Комбинирование псевдоклассов 🎯

Псевдоклассы можно объединять для точного таргетинга:

/* Стиль для наведения на активную вкладку */
.tab:active:hover {
  background-color: darkorange;
}

/* Выделение чётных строк в таблице */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

Практический пример: кнопка с микровзаимодействиями 🚀

Создадим интерактивную кнопку, которая реагирует на все состояния:

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(to right, #ff6b6b, #ffa3a3);
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255,107,107,0.4);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 5px rgba(255,107,107,0.4);
}

.btn:focus {
  outline: 3px solid rgba(255,107,107,0.5);
}

.btn:disabled {
  background: #ccc;
  transform: none;
  box-shadow: none;
}

Итоговая таблица популярных псевдоклассов 📊

Проверь себя! 🧠

1. Как сделать, чтобы все нечётные строки таблицы были серыми?
2. Какой псевдокласс сработает при нажатии пробела на клавиатуре, когда фокус на кнопке?
3. Почему :visited имеет ограничения на изменяемые свойства?

Ответы:

1. tr:nth-child(odd) { background: #f0f0f0; }
2. :active (при нажатии) и :focus (когда элемент в фокусе)
3. Из соображений безопасности, чтобы нельзя было узнать историю посещений пользователя

Теперь ты готов создавать по-настоящему динамичные интерфейсы! Помни: правильное использование псевдоклассов — признак профессионального верстальщика. 🏆