- CSS псевдокласс :active
- Версия
- Синтаксис
- Пример
- Пример
- Пример
- Поддержка браузера
- :active
- Пример
- Как пишется
- Селектор по тегу в состоянии :active
- Селектор по классу в состоянии :active
- Составной селектор в состоянии :active
- Селектор по id в состоянии :active
- Селектор по классу и его псевдоэлемент в состоянии :active
- Как понять
- Подсказки
- На практике
- Алёна Батицкая советует
- :active
- Пример
- Как пишется
- Селектор по тегу в состоянии :active
- Селектор по классу в состоянии :active
- Составной селектор в состоянии :active
- Селектор по id в состоянии :active
- Селектор по классу и его псевдоэлемент в состоянии :active
- Как понять
- Подсказки
- На практике
- Алёна Батицкая советует
- :active
- Как сделать — Добавить активный класс к текущему элементу
- Активный элемент
- Пример
- Пример
- Пример
- Пример
CSS псевдокласс :active
Псевдокласс :active определяет стиль для активной ссылки или любого другого элемента. Он активируется пользователем.
Элемент активируется, когда пользователь нажимает на ссылку или элемент и отпускает кнопку мыши.
Псевдокласс :active используется для элементов и .
Псевдоклассы :link, :hover или :visited переопределяют стиль, установленный псевдоклассом :active .
Версия
Синтаксис
Пример
html> html> head> title>Заголовок документа title> style> a:active < background-color: #8ebf42; color: #666; > style> head> body> h2>Пример селектора :active h2> a href="https://www.w3docs.com/">w3docs.com a> body> html>Пример
html> html> head> title>Заголовок документа title> style> a < color: #1c87c9; > a:active < background-color: #8ebf42; color: #eee; > style> head> body> h2>Пример селектора :active h2> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. p> body> html>В следующем примере нажмите на текст и увидите, как изменится цвет текста:
Пример
html> html> head> title>Заголовок документа title> style> div < padding: 30px; background-color: #8ebf42; color:#eee; > div:active < background-color: #666; color: #fff; > style> head> body> h2>Пример селектора :active h2> div> Lorem Ipsum - это текст-"рыба". div> body> html>Поддержка браузера
: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 — :focus — :hover — :active .
Этот порядок легко запомнить в виде аббревиатуры LVFHA и мнемоники LoVe Fears HAte.
: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 — :focus — :hover — :active .
Этот порядок легко запомнить в виде аббревиатуры LVFHA и мнемоники LoVe Fears HAte.
:active
The :active pseudo selector changes the appearance of a link while it is being activated (being clicked on or otherwise activated). It’s usually only seen for a split second, and provides visual feedback that the element was indeed clicked. It’s most typically used on anchor links ( ). For instance, here’s CSS that will make anchor links bump down one pixel (giving the impression of being pushed in three-dimensional space) in the active state:
:active can also apply to any element. In the Pen below, clicking anywhere on the page will make the whole page yellow:
Doing them in that order is ideal.
a:link < /* Essentially means a[href], or that the link actually goes somewhere */ color: blue; >a:visited < color: purple; >a:hover < color: green; >a:active
Otherwise, say if you listed the :visited style last, if that link was visited it would override the :active and :hover declaration and the link would always be purple regardless if you were hovering or if the link was active (not ideal).
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| All | All | All | All | All | All |
| Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| All | All | All | All | All |
Source: caniuse
Как сделать — Добавить активный класс к текущему элементу
Узнать, как добавить активный класс к текущему элементу с помощью JavaScript.
Выделите активную/текущую (нажатую) кнопку:
Активный элемент
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Пример
/* Стиль кнопок */
.btn border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
>
/* Стиль активного класса (и кнопки на наведении курсора мыши) */
.active, .btn:hover background-color: #666;
color: white;
>
Шаг 3) Добавить JavaScript:
Пример
// Получить элемент контейнера
var btnContainer = document.getElementById(«myDIV»);
// Сделать все кнопки с внутри контейнера
var btns = btnContainer.getElementsByClassName(«btn»);
// Выполните цикл по кнопкам и добавьте активный класс к текущей/нажатой кнопке
for (var i = 0; i < btns.length; i++) btns[i].addEventListener("click", function() var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(» active», «»);
this.className += » active»;
>);
>
Если у вас нет активного класса, установленного на элементе button для начала, используйте следующий код:
Пример
// Получить элемент контейнера
var btnContainer = document.getElementById(«myDIV»);
// Сделать все кнопки с внутри контейнера
var btns = btnContainer.getElementsByClassName(«btn»);
// Выполните цикл по кнопкам и добавьте активный класс к текущей/нажатой кнопке
for (var i = 0; i < btns.length; i++) btns[i].addEventListener("click", function() var current = document.getElementsByClassName("active");
// Если нет активного класса
if (current.length > 0) current[0].className = current[0].className.replace(» active», «»);
>
// Добавить активный класс для текущей/нажатой кнопки
this.className += » active»;
>);
>