skip to main content

:active

css

Кратко 🔗

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

Пример псевдокласса active при нажатии на кнопку

Пример 🔗

Сделаем объёмную кнопку, у которой будет меняться цвет фона и текста в активной фазе.

button {
padding: 2.5rem;
border: 0;
border-radius: 2.5rem;
font-size: 2.5rem;
background-color: #bada55;
cursor: pointer;
transition: background 0.3s, color 0.3s;
}

button:active {
color: white;
background-color: purple;
}

Как пишется 🔗

К любому селектору добавляем двоеточие и ключевое слово active.

a:active {
} /* Селектор по тегу + :active */
.link:active {
} /* Селектор по классу + :active */
li .link:focus {
} /* Составной селектор + :active */
#id:active {
} /* Селектор по тегу + :active */
.link:before:active {
} /* Селектор по классу + псевдоэлемент + :active */

Как это понять 🔗

В момент нажатия на элемент при помощи клавиши мыши или клавиши клавиатуры этому самому элементу присваивается виртуальный класс :active, который можно стилизовать. За присвоение этого класса отвечает движок браузера, нам о самом процессе присвоения думать не нужно.

Подсказки 🔗

💡 Смену стилей между состояниями можно анимировать при помощи transition 🎉

💡 Часто если дизайнер не позаботился об отрисовке состояния :active для кнопок можно задать стили сразу и для наведения курсора и для активного состояния:

button:hover,
button:active
{
/* Стили */
}

В работе 🔗

🛠 Дизайнеры и верстальщики почему-то часто забывают про тот короткий промежуток времени, когда пользователь нажал клавишу мыши, но ещё её не отпустил. И не стилизуют состояние :active. Но «дьявол кроется в деталях» и если в вашем интерфейсе будут продуманы даже такие небольшие элементы, то он будет создавать ощущение опрятности и заботы о пользователе.

🛠 Если вы задаёте стили для разных состояний ссылок, то следует придерживаться определённого порядка в объявлении стилей: :link:visited:hover:active.

Этот порядок легко запомнить в виде аббревиатуры LVHA.

Автор: Алёна,