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

Leave a Comment / Css / By /

:active ⚡️ 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 (рус.)

:active — CSS — Дока

  1. Кратко
  2. Пример
  3. Как пишется
    1. Селектор по тегу в состоянии :active
    2. Селектор по классу в состоянии :active
    3. Составной селектор в состоянии :active
    4. Селектор по id в состоянии :active
    5. Селектор по классу и его псевдоэлемент в состоянии :active
  4. Как понять
  5. Подсказки
  6. На практике
    1. Алёна Батицкая советует

Кратко

Скопировано

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

Скопировано

a:active {  /* Стили */}
          a:active {
  /* Стили */
}

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

:active

Скопировано

. link:active {  /* Стили */}
          .link:active {
  /* Стили */
}

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

:active

Скопировано

li .link:focus {  /* Стили */}
          li .link:focus {
  /* Стили */
}

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

:active

Скопировано

#id:active {  /* Стили */}
          #id: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.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

:hover

ctrl + alt + ←

→

:target

ctrl + alt + →

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
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

5 Top3 Examples Примеры HTML

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

FORUM | О

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

Copyright 1999-2023 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 не будет опубликован. Обязательные поля помечены *