- Псевдоклассы
- Кратко
- Пример
- Как понять
- Как пишется
- :active
- :is ( )
- :any — link , :link , :visited
- :checked
- :default
- :dir ( )
- :disabled , :enabled
- :empty
- Псевдоклассы группы child
- Псевдоклассы группы type
- :fullscreen
- :focus и :focus — within
- :has ( )
- :hover
- :indeterminate
- :in — range и :out — of — range
- :lang ( )
- :not ( )
- :optional и :required
- :read — only и :read — write
- :root
- :target
- :valid и :invalid
- Подсказки
- На практике
- Realetive советует
- :hover, :focus, :active, или зачем указывать состояния элементам
- Основные состояния интерактивных элементов
- :hover
- :focus
- :active
- Как состояния влияют на доступность сайта
- Материалы по теме
Псевдоклассы
Отдельный тип селекторов, уточняющих состояние или тип элемента.
- Кратко
- Пример
- Как понять
- Как пишется
- :active
- :is()
- :any-link, :link, :visited
- :checked
- :default
- :dir()
- :disabled, :enabled
- :empty
- Псевдоклассы группы child
- Псевдоклассы группы type
- :fullscreen
- :focus и :focus-within
- :has()
- :hover
- :indeterminate
- :in-range и :out-of-range
- :lang()
- :not()
- :optional и :required
- :read-only и :read-write
- :root
- :target
- :valid и :invalid
- Realetive советует
Кратко
Скопировать ссылку «Кратко» Скопировано
Псевдоклассы — особый вид селектора, который уточняет тип или состояние. Обычно это какой-то качественный признак: реакция на наведение курсора, порядок следования и другие.
Пример
Скопировать ссылку «Пример» Скопировано
Рассмотрим CSS для подсветки строки таблицы при наведении курсора.
В обычном состоянии цвет фона — тёмный:
tr background-color: #18191C;>tr background-color: #18191C; >При наведении курсора цвет фона изменится на голубой:
tr:hover background-color: #123E66;>tr:hover background-color: #123E66; >Как понять
Скопировать ссылку «Как понять» Скопировано
Благодаря псевдоклассам мы можем контролировать динамические параметры селекторов. Эти свойства сработают, когда селектор подходит под дополнительный признак.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
.block:hover color: red;>.block:hover color: red; >Селектор может и отсутствовать. Тогда правило применится ко всем элементам, которые могут иметь признак этого псевдокласса. Например, CSS-правило :focus <> применится к любому элементу, который будет в фокусе.
:focus color: lightblue;>:focus color: lightblue; >:active
Скопировать ссылку «:active» Скопировано
Применяется к интерактивным элементам в момент взаимодействия. Например, нажатая кнопка.
:is ( )
Скопировать ссылку «:is()» Скопировано
Позволяет сгруппировать схожие селекторы вместо последовательного перечисления через запятую. При группировке большого количества селекторов это может существенно сократить, а главное — упростить написание.
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a /* … */>h1 a, h2 a, h3 a, h4 a, h5 a, h6 a /* … */ >с :is ( ) это можно описать так:
:is(h1, h2, h3, h4, h5, h6) a /* … */>:is(h1, h2, h3, h4, h5, h6) a /* … */ >:any — link , :link , :visited
Скопировать ссылку «:any-link, :link, :visited» Скопировано
:checked
Скопировать ссылку «:checked» Скопировано
Применяется к элементам, состояние которых меняется с помощью атрибута checked .
:default
Скопировать ссылку «:default» Скопировано
Применяется к элементам формы ( , , и ), у которых можно задать начальное состояние.
Например, у селектор применится к тому чекбоксу, у которого в разметке установлен атрибут checked , т. е. он по умолчанию выбран:
:default + span color: #2E9AFF;>:default + span color: #2E9AFF; >:dir ( )
Скопировать ссылку «:dir()» Скопировано
Позволяет найти элементы по направлению текста в нём (например, в арабском направление письма идёт справа налево). К сожалению, пока свойство поддерживается только в Firefox.
:disabled , :enabled
Скопировать ссылку «:disabled, :enabled» Скопировано
Позволяют находить элементы формы по состоянию их атрибута disabled . Почти эквивалентны селекторам по атрибуту ( [disabled ] и :not ( [ disabled ] ) соответственно), но более гибкие, т. к. среагируют на унаследованное состояние disabled . Если есть , то отключаются вложенные в него контролы форм.
:empty
Скопировать ссылку «:empty» Скопировано
Применяется к элементам, у которых внутри нет других тегов или текста. Например, можно проверить, что у кнопки не задан текст или иконка, чтобы задать минимальные размеры:
Псевдоклассы группы child
Скопировать ссылку «Псевдоклассы группы child» Скопировано
Селекторы элемента по его положению относительно родителя (первый, последний, n-й, единственный).
Псевдоклассы группы type
Скопировать ссылку «Псевдоклассы группы type» Скопировано
Селектор по типу внутри одного родителя.
:fullscreen
Скопировать ссылку «:fullscreen» Скопировано
Признак того, что документ развернули на всё окно (с помощью JavaScript).
Скроем панель управления у плеера, если он развёрнут на весь экран:
.player:fullscreen .player__controls display: none;>.player:fullscreen .player__controls display: none; >:focus и :focus — within
Скопировать ссылку «:focus и :focus-within» Скопировано
Элемент, который сейчас находится в фокусе. А :focus — within ещё обозначает элемент, внутри которого находится элемент в фокусе.
:has ( )
Скопировать ссылку «:has()» Скопировано
Позволяет выбрать элемент, уточнив основной селектор дополнительным, при этом не увеличив его вес. В отличие от привычных селекторов, правило применится только к тому селектору, который был описан до :has ( ) . В январе 2021 года нет поддержки ни в одном браузере.
:hover
Скопировать ссылку «:hover» Скопировано
Состояние элемента, когда на него навели курсор.
:indeterminate
Скопировать ссылку «:indeterminate» Скопировано
Элементы, которые могут находиться в промежуточном состоянии:
- , отображающий, что не все пункты вложенной группы были выделены.
- Группа с одинаковым name , но у которой ни один элемент не установлен в checked .
- .
Для состояние indeterminate в HTML можно задать только через JavaScript.
:in — range и :out — of — range
Скопировать ссылку «:in-range и :out-of-range» Скопировано
Применяется для , у которого определены атрибуты min и max и введённое значение соответствует ( :in — range ) или нет ( :out — of — range ) этому диапазону.
:lang ( )
Скопировать ссылку «:lang()» Скопировано
Селектор по языку содержимого. В HTML есть атрибут lang , который указывает на язык содержимого. Псевдокласс lang ( ) позволяет обратиться к элементу, чьё значение атрибута lang подходит под условие.
Например, в арабском языке нет переносов:
:lang(ar) hyphens: none;>:lang(ar) hyphens: none; >:not ( )
Скопировать ссылку «:not()» Скопировано
Находит элемент, который не соответствует селектору, переданному в качестве аргумента. Очень мощный псевдокласс, позволяющий писать эффективные CSS-селекторы.
Выделим красной рамкой все
, которым забыли прописать атрибут alt :
img:not([alt]) outline: 2px solid red;>img:not([alt]) outline: 2px solid red; >:optional и :required
Скопировать ссылку «:optional и :required» Скопировано
:optional находит любой , у которого не установлен атрибут required — то есть находит необязательные поля ввода. А :required — наоборот, те , у которых есть этот атрибут.
:read — only и :read — write
Скопировать ссылку «:read-only и :read-write» Скопировано
Находит элементы, недоступные ( :read — only ) или наоборот ( :read — write ) для редактирования. Например, ориентируется на наличие атрибута disabled или readonly .
:root
Скопировать ссылку «:root» Скопировано
Соответствует корневому тегу-элементу документа. Для HTML это, соответственно, , для SVG — . Специфичность селектора :root выше, чем у селектора по тегу.
:target
Скопировать ссылку «:target» Скопировано
При переходе по ссылке, которая ведёт на URI-фрагмент (элемент внутри страницы), id фрагмента совпадает со значением атрибута id этого элемента — это состояние можно «поймать» с помощью псевдокласса :target :
:valid и :invalid
Скопировать ссылку «:valid и :invalid» Скопировано
Селектор :valid соответствует , или -элементу, контент которого валиден в соответствии с типом поля или полей внутри. Обратный эффект у :invalid — сработает при ошибке HTML-валидации.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Псевдоклассы пишутся с одним двоеточием впереди.
💡 Псевдоклассы необязательно описываются вместе с элементом — если он не указан, селектор будет обозначать любой доступный элемент, который может иметь этот псевдокласс (при активации нужного состояния).
💡 Если задать псевдокласс элементу-родителю, то можно стилизовать дочерний элемент при изменении состояния у родителя.
nav:hover a font-size: 120%;>nav:hover a font-size: 120%; >На практике
Скопировать ссылку «На практике» Скопировано
Realetive советует
Скопировать ссылку «Realetive советует» Скопировано
🛠 Понимание изменения состояния элементов и манипулирование им через псевдоклассы помогает делать производительные интерфейсы даже без JavaScript или, например, создавать собственный стиль для контролов формы:
:hover, :focus, :active, или зачем указывать состояния элементам
CSS-псевдоклассы :hover , :focus и :active задают элементам состояния, которые реализуются при определённых действиях пользователя. Состояния меняют цвет или размер элемента, добавляют ему рамку, делают более интерактивным, выделяют и указывают на его назначение.
В статье рассмотрим, в чём различия состояний, какие элементы важно выделять и как это влияет на доступность сайта.
Основные состояния интерактивных элементов
:hover
Состояние :hover срабатывает, когда пользователь наводит курсор на элемент. Часто используется для создания эффекта взаимодействия с элементом, например, при наведении на ссылку меняется цвет текста. Это даёт пользователю понять, что на элемент можно нажать и получить определённый результат.
:focus
Состояние :focus срабатывает при клике на элемент или переходе на него с клавиатуры при помощи клавиши tab . Применяется состояния ко всем интерактивным элементам — , , , и элементам с tabindex .
Существует также состояние :focus-visible , которое возникает исключительно при фокусе с клавиатуры. Это состояние улучшает доступность сайта для пользователей с ограниченными возможностями. Если человек перемещается по интерфейсу с помощью клавиатуры, ему важно понимать, где он находится. Поэтому состояние фокуса рекомендуется делать как можно более заметным.
:active
Состояние :active срабатывает, когда пользователь взаимодействует с элементом, например, когда удерживает кнопку мыши на элементе. Часто используется для создания эффекта «нажатия» на кнопку или ссылку. :active может не сильно отличаться по цвету, так как пользователь знает, с каким элементом взаимодействует.
Как состояния влияют на доступность сайта
Не все пользователи используют мышь, поэтому важно, чтобы по сайту можно было перемещаться при помощи клавиатуры или других альтернативных устройств.
Рекомендуется обязательно указывать состояния :hover , :focus и :active для всех интерактивных элементов, с которыми взаимодействует пользователь. Это позволяет создать доступный и понятный интерфейс.
В формах обратной связи состояние :focus используется для выделения активного поля при навигации с помощью клавиатуры. Это помогает пользователям с ограниченными возможностями корректно заполнять форму.
Когда состояния элементов различаются, пользователю легко понять, где ссылка, а где сейчас находится фокус. Ссылкам лучше указывать разные цвета для :hover и :active , чтобы пользователь мог отличить, какой элемент он выбрал.
Поэтому прописывать все состояния вместе не всегда хорошая идея:
Кроме того, в разных браузерах и операционных системах отображение состояний может отличаться, поэтому такой код не будет работать идеально. Лучше полностью разделять состояния и каждому давать свою стилизацию.
Также состояния элементов могут использоваться для создания эффектов анимации и визуальных изменений на сайте. Например, при наведении на изображение можно увеличить его размер или добавить эффект тени.
Узнать больше о доступности сайтов и способах её улучшения вы можете на нашем специализированном курсе.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
