:active

Один из псевдоклассов, показывающих, что интерфейс откликается на действия пользователя

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Псевдокласс :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;}
          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.

Селектор по тегу в состоянии :active

Секция статьи "Селектор по тегу в состоянии :active"
        
          
          a:active {  /* Стили */}
          a:active {
  /* Стили */
}

        
        
          
        
      

Селектор по классу в состоянии :active

Секция статьи "Селектор по классу в состоянии :active"
        
          
          .link:active {  /* Стили */}
          .link:active {
  /* Стили */
}

        
        
          
        
      

Составной селектор в состоянии :active

Секция статьи "Составной селектор в состоянии :active"
        
          
          li .link:focus {  /* Стили */}
          li .link:focus {
  /* Стили */
}

        
        
          
        
      

Селектор по id в состоянии :active

Секция статьи "Селектор по id в состоянии :active"
        
          
          #id:active {  /* Стили */}
          #id:active {
  /* Стили */
}

        
        
          
        
      

Селектор по классу и его псевдоэлемент в состоянии :active

Секция статьи "Селектор по классу и его псевдоэлемент в состоянии :active"
        
          
          .link::before:active {  /* Стили */}
          .link::before:active {
  /* Стили */
}

        
        
          
        
      

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

Секция статьи "Как это понять"

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

Подсказки

Секция статьи "Подсказки"

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

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

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

        
        
          
        
      

На практике

Секция статьи "На практике"

Алёна Батицкая советует

Секция статьи "Алёна Батицкая советует"

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

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

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