Псевдокласс css для нажатия

:active¶

Псевдокласс :active соответствует элементу в момент, когда он активируется пользователем.

Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью — это, как правило, время между нажатием и отпусканием пользователем кнопки мыши. Также псевдокласс :active срабатывает при использовании клавишы TAB на клавиатуре. Обычно это используется для HTML-элементов и , но может применяться и к другим элементам.

Это свойство может быть переопределено любыми другими псевдоклассами, относящимся к ссылке, такими как :link , :hover и :visited , описанными в последующих правилах. Чтобы стилизировать нужные ссылки, вам нужно ставить правило :active после всех других правил, относящихся к ссылке, как определено правилом LVHA-порядком: :link — :visited — :hover — :active .

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

Синтаксис¶

Спецификации¶

Описание и примеры¶

a href="#">This link will turn lime while you click on it.a> 

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

/* Unvisited links */ a:link  color: blue; > /* Visited links */ a:visited  color: purple; > /* User hovers */ a:hover  background: yellow; > /* Active links */ a:active  color: lime; > 

См. также¶

Ссылки¶

Источник

:active

Псевдокласс :active соответствует элементу в момент, когда он активируется пользователем. Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью — это, как правило, время между нажатием и отпусканием пользователем кнопки мыши.

Это свойство может быть переопределено любыми другими псевдоклассами, относящимся к ссылке, такими как :link , :hover и :visited , описанными в последующих правилах. Чтобы стилизировать нужные ссылки, вам нужно ставить правило :active после всех других правил, относящихся к ссылке, как определено правилом LVHA-порядком: :link — :visited — :hover — :active .

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

Синтаксис

Пример

Активные ссылки

HTML

p>Этот абзац содержит ссылку: a href="#">Эта ссылка будет окрашена в красный, когда вы нажмёте на неё.a> У абзаца фон станет серым при нажатии на него или на ссылку. p> 

CSS

a:link  color: blue; > /* Непосещённые ссылки */ a:visited  color: purple; > /* Посещённые ссылки */ a:hover  background: yellow; > /* Ссылки при наведении */ a:active  color: red; > /* Активные ссылки */ p:active  background: #eee; > /* Активные абзацы */ 

Результат

Активные элементы формы

HTML

form> label for="my-button">Моя кнопка: label> button id="my-button" type="button">Попробуй Нажать Меня или Мою подсказку!button> form> 

CSS

form :active  color: red; > form button  background: white; > 

Result

Спецификации

Спецификация	Статус	Комментарий
HTML Living Standard Определение ‘:active’ в этой спецификации.	Живой стандарт
Selectors Level 4 Определение ‘:active’ в этой спецификации.	Рабочий черновик	Без изменений
Selectors Level 3 Определение ‘:active’ в этой спецификации.	Рекомендация	Без изменений
CSS Level 2 (Revision 1) Определение ‘:active’ в этой спецификации.	Рекомендация	Без изменений
CSS Level 1 Определение ‘:active’ в этой спецификации.	Рекомендация	Первоначальное определение

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 22 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

: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.

Источник