Кратко
Секция статьи "Кратко"Псевдоклассы — особый вид селектора, который уточняет тип или состояние. Обычно это какой-то качественный признак: реакция на наведение курсора, порядок следования и другие.
Пример
Секция статьи "Пример"Рассмотрим 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 { 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(h1, h2, h3, h4, h5, h6) a { /* … */}
:is(h1, h2, h3, h4, h5, h6) a { /* … */ }
:any-link
, :link
, :visited
Секция статьи ":any-link, :link, :visited" Применяется ко всем элементам, которые могут иметь атрибут href
(<a>
, <area>
и <link>
).
характеризует ещё не посещённые страницы,
— наоборот, посещённые (в рамках одного домена).
:checked
Секция статьи ":checked" Применяется к элементам, состояние которых меняется с помощью атрибута checked
.
:default
Секция статьи ":default" Применяется к элементам формы (<input type
, <input type
, <option>
и <button>
), у которых можно задать начальное состояние.
Например, у <input type
селектор применится к тому чекбоксу, у которого в разметке установлен атрибут checked
, т. е. он по умолчанию выбран:
:default + span { color: #2E9AFF;}
:default + span { color: #2E9AFF; }
:dir()
Секция статьи ":dir()" Позволяет найти элементы по направлению текста в нём (например, в арабском направление письма идёт справа налево). К сожалению, пока свойство поддерживается только в Firefox.
:disabled
, :enabled
Секция статьи ":disabled, :enabled" Позволяют находить элементы формы по состоянию их атрибута disabled
. Почти эквивалентны селекторам по атрибуту (
и
соответственно), но более гибкие, т. к. среагируют на унаследованное состояние disabled
. Если есть <fieldset 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" Элемент, который сейчас находится в фокусе. А
ещё обозначает элемент, внутри которого находится элемент в фокусе.
:has()
Секция статьи ":has()" Позволяет выбрать элемент, уточнив основной селектор дополнительным, при этом не увеличив его вес. В отличие от привычных селекторов, правило применится только к тому селектору, который был описан до
. В январе 2021 года нет поддержки ни в одном браузере.
:hover
Секция статьи ":hover" Состояние элемента, когда на него навели курсор.
:indeterminate
Секция статьи ":indeterminate" Элементы, которые могут находиться в промежуточном состоянии:
<input type
, отображающий, что не все пункты вложенной группы были выделены.= "checkbox"> - Группа
<input type
с одинаковым= "radio"> name
, но у которой ни один элемент не установлен вchecked
. <progress>
.
Для <input>
состояние indeterminate
в HTML можно задать только через JavaScript.
:in-range
и :out-of-range
Секция статьи ":in-range и :out-of-range" Применяется для <input>
, у которого определены атрибуты min
и max
и введённое значение соответствует (
) или нет (
) этому диапазону.
:lang()
Секция статьи ":lang()" Селектор по языку содержимого. В HTML есть атрибут lang
, который указывает на язык содержимого. Псевдокласс lang
позволяет обратиться к элементу, чьё значение атрибута lang
подходит под условие.
Например, в арабском языке нет переносов:
:lang(ar) { hyphens: none;}
:lang(ar) { hyphens: none; }
:not()
Секция статьи ":not()" Находит элемент, который не соответствует селектору, переданному в качестве аргумента. Очень мощный псевдокласс, позволяющий писать эффективные CSS-селекторы.
Выделим красной рамкой все <img>
, которым забыли прописать атрибут alt
:
img:not([alt]) { outline: 2px solid red;}
img:not([alt]) { outline: 2px solid red; }
:optional
и :required
Секция статьи ":optional и :required" Основная статья про
.
находит любой <input>
, у которого не установлен атрибут required
— то есть находит необязательные поля ввода. А
— наоборот, те <input>
, у которых есть этот атрибут.
:read-only
и :read-write
Секция статьи ":read-only и :read-write" Находит элементы, недоступные (
) или наоборот (
) для редактирования. Например, ориентируется на наличие атрибута disabled
или readonly
.
:root
Секция статьи ":root" Соответствует корневому тегу-элементу документа. Для HTML это, соответственно, <html>
, для SVG — <svg>
. Специфичность селектора
выше, чем у селектора по тегу.
:target
Секция статьи ":target" При переходе по ссылке, которая ведёт на URI-фрагмент (элемент внутри страницы), id
фрагмента совпадает со значением атрибута id
этого элемента — это состояние можно «поймать» с помощью псевдокласса
:
:valid
и :invalid
Секция статьи ":valid и :invalid" Селектор
соответствует <input>
, <fieldset>
или <form>
-элементу, контент которого валиден в соответствии с типом поля или полей внутри. Обратный эффект у
— сработает при ошибке HTML-валидации.
Подсказки
Секция статьи "Подсказки"💡 Псевдоклассы пишутся с одним двоеточием впереди.
💡 Псевдоклассы необязательно описываются вместе с элементом — если он не указан, селектор будет обозначать любой доступный элемент, который может иметь этот псевдокласс (при активации нужного состояния).
💡 Если задать псевдокласс элементу-родителю, то можно стилизовать дочерний элемент при изменении состояния у родителя.
Если курсор находится внутри <nav>
, увеличить размер шрифта у вложенных ссылок:
nav:hover a { font-size: 120%;}
nav:hover a { font-size: 120%; }
На практике
Секция статьи "На практике"🛠 Понимание изменения состояния элементов и манипулирование им через псевдоклассы помогает делать производительные интерфейсы даже без JavaScript или, например, создавать собственный стиль для контролов формы: