Псевдоклассы — CSS | MDN

Псевдокласс в CSS — это ключевое слово, добавленное к селектору, которое определяет его особое состояние. Например, :hover может быть использован для изменения цвета кнопки при наведении курсора на неё.

div:hover {
  background-color: #F89B4D;
}

Псевдоклассы дают возможность стилизовать элемент на основе не только отношений в DOM-дереве, но и основываясь на внешних факторах, таких как история посещений (например, :visited), состояние содержимого (вроде :checked у некоторых элементов формы) или позиции курсора мыши (например, :hover определяет, находится ли курсор мыши над элементом).

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

selector:pseudo-class {
  property: value;
}

Как и с обычными классами, можно совмещать вместе в одном селекторе любое число псевдоклассов.

  • :active
  • :any (en-US)
  • :any-link
  • :checked
  • :default
  • :defined
  • :dir()
  • :disabled
  • :empty
  • :enabled
  • :first
  • :first-child
  • :first-of-type
  • :fullscreen
  • :focus
  • :hover
  • :indeterminate
  • :in-range
  • :invalid
  • :lang()
  • :last-child
  • :last-of-type
  • :left
  • :link
  • :not()
  • :nth-child()
  • :nth-last-child()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :read-only
  • :read-write
  • :required
  • :right
  • :root
  • :scope (en-US)
  • :target
  • :valid
  • :visited
СпецификацияСтатусКомментарий
Fullscreen APIЖивой стандартОпределён :fullscreen.
HTML Living StandardЖивой стандартНет изменений от HTML5.
Selectors Level 4Рабочий черновикОпределены :any-link, :local-link, :scope
, :active-drop-target, :valid-drop-target, :invalid-drop-target, :current, :past, :future, :placeholder-shown, :user-error, :blank, :nth-match(), :nth-last-match(), :nth-column(), :nth-last-column() и :matches(). Нет существенных изменений для псевдоклассов, определённых в Selectors Level 3 и HTML5 (не рассматривая семантическое значение).
HTML5РекомендацияОпределено семантическое значение в HTML контексте для :link, :visited, :active
, :enabled, :disabled, :checked и :indeterminate. Определены :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write и :dir().
CSS Basic User Interface Module Level 3РекомендацияОпределены :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only
и :read-write, но без связанного семантического значения.
Selectors Level 3РекомендацияОпределены :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty и :not(). Определён синтаксис для :enabled, :disabled, :checked и :indeterminate, но без связанного семантического значения. Нет значительных изменений для псевдоклассов, определённых в CSS Level 2 (Revision 1).
CSS Level 2 (Revision 1)РекомендацияОпределены :lang(), :first-child, :hover и :focus. Нет значительных изменений для псевдоклассов, определённых в CSS Level 1.
CSS Level 1РекомендацияОпределены :link, :visited и :active, но без связанного семантического значения.
  • Псевдоэлементы

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

:active — CSS | MDN

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

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

/*  Любой элемент <a>, который будет активирован */
a:active {
  color: red;
}

Псевдокласс :active чаще используется с элементами <a> и <button>, но может применяться и к другим элементам – например элементам форм.

Это свойство может быть переопределено любыми другими псевдоклассами, относящимся к ссылке, такими как :link, :hover и

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

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

Error: could not find syntax for this item

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

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 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 with JavaScript enabled. Enable JavaScript to view data.

  • Псевдоклассы, связанные с ссылками: :link, :visited и :hover.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

Псевдоклассы — CSS: каскадные таблицы стилей

Псевдокласс CSS

— это ключевое слово, добавляемое к селектору, которое определяет особое состояние выбранных элементов. Например, псевдокласс :hover можно использовать для выбора кнопки, когда указатель пользователя наводит на кнопку, и затем для этой выбранной кнопки можно задать стиль.

 /* Любая кнопка, над которой находится указатель пользователя */
кнопка:наведите {
  цвет синий;
}

Псевдокласс состоит из двоеточия ( : ), за которым следует имя псевдокласса (например, :hover ). Функциональный псевдокласс также содержит пару скобок для определения аргументов (например, :dir() ). Элемент, к которому прикреплен псевдокласс, определяется как элемент привязки (например, кнопка в случае button:hover ).

Псевдоклассы позволяют применить стиль к элементу не только по отношению к содержимому дерева документа, но и по отношению к внешним факторам, таким как история навигатора ( :visited , например), состояние его содержимого (например, :checked для определенных элементов формы) или положение мыши (например, :hover , которое позволяет узнать, находится ли мышь над элементом или нет).

Примечание: В отличие от псевдоклассов псевдоэлементы могут использоваться для стилизации определенной части элемента.

Эти псевдоклассы позволяют выбирать элементы на основе их состояний отображения.

:полноэкранный режим

Соответствует элементу, который в данный момент находится в полноэкранном режиме.

:модальный

Соответствует элементу, находящемуся в состоянии, в котором исключается любое взаимодействие с внешними элементами до тех пор, пока взаимодействие не будет отклонено.

:картинка в картинке

Соответствует элементу, который в данный момент находится в режиме «картинка в картинке».

Эти псевдоклассы относятся к элементам формы и позволяют выбирать элементы на основе атрибутов HTML и состояния, в котором находится поле до и после взаимодействия.

:автозаполнение

Соответствует, когда было автоматически заполнено браузером.

:включено

Представляет элемент пользовательского интерфейса, находящийся во включенном состоянии.

:отключено

Представляет элемент пользовательского интерфейса, который находится в отключенном состоянии.

:только для чтения

Представляет любой элемент, который не может быть изменен пользователем.

: чтение-запись

Представляет любой элемент, редактируемый пользователем.

: показан заполнитель

Соответствует элементу ввода, отображающему текст-заполнитель. Например, он будет соответствовать заполнитель атрибут в элементах и