Active a css: Псевдокласс :active | htmlbook.ru

HTML и CSS с примерами кода

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

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

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

:active.

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

Псевдоклассы
  • :active
  • :any-link
  • :blank
  • :checked
  • :current()
  • :default
  • :defined
  • :dir()
  • :disabled
  • :empty
  • :enabled
  • :first
  • :first-child
  • :first-of-type
  • :focus
  • :focus-visible
  • :focus-within
  • :fullscreen
  • :future
  • :has()
  • :host
  • :host()
  • :host-context()
  • :hover
  • :indeterminate
  • :in-range
  • :invalid
  • :is()
  • :lang()
  • :last-child
  • :last-of-type
  • :left
  • :link
  • :local-link
  • :not()
  • :nth-child()
  • :nth-col()
  • :nth-last-child()
  • :nth-last-col()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :past
  • :placeholder-shown
  • :read-only
  • :read-write
  • :required
  • :right
  • :root
  • :scope
  • :target
  • :target-within
  • :user-invalid
  • :valid
  • :visited
  • :where()

Синтаксис

/* Selects any <a> that is being activated */
a:active {
  color: red;
}

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

  • HTML Living Standard
  • Selectors Level 4
  • Selectors Level 3
  • CSS Level 2 (Revision 1)
  • CSS Level 1

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

HTMLCSS

<a href="#">This link will turn lime while you click on it. </a>
/* Unvisited links */
a:link {
  color: blue;
}
/* Visited links */
a:visited {
  color: purple;
}
/* User hovers */
a:hover {
  background: yellow;
}
/* Active links */
a:active {
  color: lime;
}

См. также

  • Связанные псевдоклассы :link, :visited, :hover

Ссылки

  • Псевдо-класс :active MDN (рус.)

CSS/Псевдокласс :active

Синтаксис

[.класс]:active { свойства }

Описание

Псевдокласс :active указывает веб-браузеру как необходимо изменить элемент при его активации.

Применяется: В CSS1 применяется только к элементам a с атрибутом «href»;
Начиная с CSS2 может применяться к любым элементам.
Регистр символов псевдокласса: не учитывается;
Медиа: визуальные.

Условия использования

В CSS1 было запрещено одновременное использование данного псевдокласса с такими псевдоклассами как «:link» и «:visited». Начиная с CSS2 существовавший запрет был снят, т.о. теперь одновременно может сочетать сразу несколько псевдоклассов («:visited:active», «:link:active»).


Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.


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

CSS Раздел
1
2.1 Anchor pseudo-classes
Перевод
2 5. 11.3 The dynamic pseudo-classes: :hover, :active, and :focus
2.1 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus Перевод
2.2 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus
3 6.6.1.2. The user action pseudo-classes :hover, :active, and :focus Перевод


Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Эффект активации элемента</title>

<style type=»text/css»>
a:active { color: yellow; }
a:visited:active { color: pink; }
.box {
width: 300px;
height: 30px;
background-color: green;
}
div:active {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h2>Псевдокласс «:active»</h2>
<a href=»/css/active/ru_css3/»>Ссылка</a>
<div>Блок меняющий цвет (при нажатии)</div>
</body>
</html>

Эффект активации элемента

CSS :active Селектор

❮ Предыдущий Справочник по селекторам CSS Далее ❯


Пример

Выберите и настройте активную ссылку:

a:active {
цвет фона: желтый;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.


Определение и использование

Селектор :active используется для выбора и оформления активной ссылки.

Ссылка становится активной при нажатии на нее.

Совет: Селектор :active можно использовать для всех элементов, кроме только ссылки.

Совет: Используйте селектор :link для оформления ссылок на непосещенные страницы, селектор :visited для стиля ссылки на посещаемые страницы и селектор :hover для оформления ссылок при наведении курсора их.

Примечание: :active ДОЛЖЕН идти после :hover (если присутствует) в CSS определение для того, чтобы быть эффективным!

Версия: УС1

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

Селектор
:активный 4,0 7,0 2,0 3. 1 9,6


Синтаксис CSS

:актив {
  объявления css ;
}



Дополнительные примеры

Пример

Выбор и стиль элемента

,

и

при щелчке по нему:

p:active, h2:active, a:active {
цвет фона: желтый;
}

Попробуйте сами »

Пример

Выберите и стилизуйте непосещенные, посещенные, наведенные и активные ссылки:

/* непросмотренная ссылка */
a:link {
  color: green;
}

/* посещенная ссылка */
a:посетили {
  цвет: зеленый;
}

/* указатель мыши над ссылкой */
a:hover {

  color: red;
}

/* выбранная ссылка */
a:active {
  цвет: желтый;
}

Попробуйте сами »

Пример

Ссылки на разные стили:

a. ex1: hover, a.ex1: active {
  цвет: красный;
}

a.ex2:hover, a.ex2:active {
 размер шрифта: 150%;
}

Попробуйте сами »


Связанные страницы

Учебник CSS: Ссылки CSS

Учебник CSS: Псевдоклассы CSS

❮ Предыдущая Справочник по селекторам CSS Следующий ❯


ВЫБОР ЦВЕТА



Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

5 Top3 Examples Примеры HTML

Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

:активный | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

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

Например, вот CSS, который заставит якорные ссылки смещаться на один пиксель вниз (создавая впечатление, будто их толкают в трехмерном пространстве) в активном состоянии:

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

Рекомендуется охватить все «состояния», особенно для ссылок. Самый простой способ сделать это — «LOVE HATE» или

    9.0232 L :link
  • O
  • V :visited
  • E
  • H :hover
  • A :active
  • T
  • E

Лучше всего выполнять их в таком порядке.

 a:link { /* Фактически означает a[href] или что ссылка действительно куда-то ведет */
  цвет синий;
}
а: посетил {
  цвет: фиолетовый;
}
а: наведите {
  цвет: зеленый;
}
а: активный {
  красный цвет;
} 

В противном случае, скажем, если вы указали стиль :visited последним, если эта ссылка была посещена, она переопределит объявление :active и :hover , и ссылка всегда будет фиолетовой, независимо от того, были ли вы наведены или если ссылка была активной (не идеальной).

Browser support

IE Edge Firefox Chrome Safari Opera
All All All All All All
Android Chrome Android Firefox Android Browser iOS Safari Opera Mobile
All Все Все Все Все
Источник: caniuse

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *