skip to main content

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

css

Кратко 🔗

Псевдоклассы — особый вид селектора, который уточняет тип или состояние. Обычно это какой-то качественный признак: реакция на наведение курсора, порядок следования и другие.

Пример 🔗

CSS для подсветки строки таблицы при наведении курсора:

В обычном состоянии цвет фон — белый

tr {
background: #fff;
}

При наведении курсора цвет фона изменится на голубой

tr:hover {
background: #c3bff5;
}

See the Pen table:hover by Roman Ganin (@Realetive) on CodePen.

Как это понять 🔗

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

Как пишется 🔗

[селектор]:псевдокласс {
свойство: значение;
}

Селектор может и отсутствовать. Тогда правило применится ко всем элементам, которые могут иметь признак этого псевдокласса. Например, CSS-правило :focus {} применится к любому элементу, который будет выделен с помощью навигации по клавише Tab с клавиатуры.

:active (основная статья) 🔗

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

:is() 🔗

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

вместо

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
/* … */
}

с :is() это можно описать так

:is(h1, h2, h3, h4, h5, h6) a {
/* … */
}

Применяется ко всем элементам, которые могут иметь атрибут href (<a>, <area> и <link>). :link характеризует ещё не посещённые страницы, :visited — наоборот, посещённые (в рамках одного домена).

:checked (основная статья) 🔗

Применяется к элементам, состояние которых меняется с помощью атрибута checked.

:default 🔗

Применим к элементам формы (<input type="radio">, <input type="checkbox">, <option> и <button>), у которых можно задать начальное состояние.

Например, у <input type="checkbox"> селектор применится к тому чекбоксу, у которого в разметке установлен атрибут checked, т. е. он по умолчанию выбран:

See the Pen :default by Roman Ganin (@Realetive) on CodePen.

:dir() 🔗

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

:disabled / :enabled 🔗

Позволяют находить элементы формы по состоянию их атрибута disabled. Почти эквивалентны селекторам по атрибуту ([disabled] и :not([disabled]) соответственно), но более гибкие, т. к. среагируют на унаследованное состояние disabled. Если есть <fieldset disabled>, то отключаются вложенные в него контролы форм.

See the Pen :disabled / :enabled by Roman Ganin (@Realetive) on CodePen.

:empty (основная статья) 🔗

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

See the Pen :empty by Roman Ganin (@Realetive) on CodePen.

:first-child / :last-child / :nth-child() / :nth-last-child() / :only-child (основная статья) 🔗

Селекторы элемента по его положению относительно родителя (первый, последний, n-й, единственный).

:first-of-type / :nth-of-type() / :last-of-type / :nth-last-of-type() / :only-of-type (основная статья) 🔗

Селектор по типу внутри одного родителя.

:fullscreen 🔗

Признак того, что документ развернули на всё окно (с помощью JavaScript).

Cкроем панель управления у плеера, если он развёрнут на весь экран:

.player:fullscreen .player__controls {
display: none;
}

:focus (основная статья) / :focus-within 🔗

Элемент, который сейчас находится в фокусе (с помощью клавиши Tab). А :focus-within ещё обозначает элемент, внутри которого находится элемент в фокусе.

:has() (основная статья) 🔗

Позволяет уточнить селектор, передав в аргумент отношение к элементу, к которому применятся псевдокласс :has(). В январе 2021 года нет поддержки ни в одном бразере.

:hover (основная статья) 🔗

Элемент, на который сейчас навели курсор.

:indeterminate 🔗

Элементы, которые могут находиться в «промежуточном» состоянии:

  • <input type="checkbox">, отображающий, что не все пункты вложенной группы были выделены;
  • группа <input type="radio"> с одинаковым name, но у которой ни один элемент не установлен в checked;
  • <progress>.

Для <input> состояние indeterminate в HTML можно задать только через JavaScript.

See the Pen :indeterminate by Roman Ganin (@Realetive) on CodePen.

:in-range / :out-of-range 🔗

Применяется для <input>, у которого определены атрибуты min и max и введённое значение соответсвует (:in-range) или нет (:out-of-range) этому диапазону.

See the Pen :in-range / :out-of-range by Roman Ganin (@Realetive) on CodePen.

:lang() 🔗

Селектор по языку содержимого текста. В HTML есть атрибут lang, который указывает на язык содержимого, этот псевдокласс позволяет обратиться к элементу по содержимому этого атрибута.

Например, в арабском языке нет переносов:

:lang(ar) {
hyphens: none;
}

:not() 🔗

Находит элемент, которые не соответсвует селектору, который передан в качестве аргумента. Очень мощный псевдокласс, позволяющий писать эффективные CSS-селекторы.

Выделим красной рамкой все <img>, которым забыли прописать атрибут alt:

img:not([alt]) {
outline: 2px solid red;
}

:optional / :required (основная статья 🔗

:optional находит любой <input>, у которого не установлен атрибут required — то есть находит необязтельные поля ввода. А :required — наоборот, те <input>, у которых есть этот атрибут.

:read-only / :read-write 🔗

Находит элементы, недоступные (:read-only) или наоборот (:read-write) для редактирования. Например, ориентируется на наличие атрибута disabled или readonly.

:root(основная статья 🔗

Соответствует корневому тегу-элементу документа. Для HTML это, соответсвенно, <html>, для SVG — <svg>. Специфичность селектора :root выше, чем у селектора по тегу.

:target 🔗

При переходе по ссылке, которая ведёт на URI-фрагмент (элемент внутри страницы), id фрагмента совпадает со значением атрибута id этого элемента — это состояние можно «поймать» с помощью псевдокласса :target:

See the Pen :target by Roman Ganin (@Realetive) on CodePen.

:valid / :invalid (основная статья 🔗

Селектор :valid соответсвует <input> или <form>-элементу, контент которого валиден в соответствии с типом поля. Обратный эффект у :invalid — сработает при ошибке HTML-валидации.

Подсказки 🔗

💡 Псевдоклассы не обязательно описываются вместе с элементом — если он не указан, селектор будет обозначать любой доступный элемент, который может иметь этот псевдокласс (при активации нужного состояния).

💡 Если задать псевдокласс элементу-родителю, то можно стилизовть дочерний элемент при изменении состояния у родителя.

Если курсор находится внутри <nav>, увеличить размер шрифта у вложенных ссылок:

nav:hover a {
font-size: 120%;
}

В работе 🔗

🛠 Понимание изменения состояния элементов и манипулирование им через псевдоклассы помогает делать производительные интерфейсы даже без JavaScript или, например, создавать собственный стиль для контролов формы:

See the Pen Кастомный чекбокс by Roman Ganin (@Realetive) on CodePen.

Автор: Роман,