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

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

Время чтения: 6 мин

Кратко

Скопировано

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

Пример

Скопировано

Рассмотрим 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`

Скопировано

Основная статья.

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

`: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`

Скопировано

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

`:checked`

Скопировано

Основная статья.

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

`:default`

Скопировано

Основная статья.

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

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

        
          
          :default + span {  color: #2E9AFF;}
          :default + span {
  color: #2E9AFF;
}

Открыть демо в новой вкладке

`:dir()`

Скопировано

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

`:disabled`, `:enabled`

Скопировано

Основная статья.

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

Открыть демо в новой вкладке

`:empty`

Скопировано

Основная статья.

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

Открыть демо в новой вкладке

Псевдоклассы группы child

Скопировано

Основная статья.

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

Псевдоклассы группы type

Скопировано

Основная статья.

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

`:fullscreen`

Скопировано

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

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

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

`:focus` и `:focus-within`

Скопировано

Основная статья про :focus.
Основная статья про :focus-within.

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

`:has()`

Скопировано

Основная статья.

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

`:hover`

Скопировано

Основная статья.

Состояние элемента, когда на него навели курсор.

`:indeterminate`

Скопировано

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

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

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

Открыть демо в новой вкладке

`:in-range` и `:out-of-range`

Скопировано

Основная статья.

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

Открыть демо в новой вкладке

`:lang()`

Скопировано

Основная статья.

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

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

        
          
          :lang(ar) {  hyphens: none;}
          :lang(ar) {
  hyphens: none;
}

`:not()`

Скопировано

Основная статья.

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

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

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

`:optional` и `:required`

Скопировано

Основная статья про :required.
Основная статья про :optional.

: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:

Открыть демо в новой вкладке

`:valid` и `:invalid`

Скопировано

Основная статья.

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

Подсказки

Скопировано

💡 Псевдоклассы пишутся с одним двоеточием впереди.

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

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

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

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

На практике

Скопировано

Realetive советует

Скопировано

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

Открыть демо в новой вкладке

На собеседовании

Скопировано

Задать вопрос в рубрику

🤚 Я знаю ответ

Это вопрос без ответа. Вы можете помочь! Чтобы написать ответ, следуйте инструкции.

Кратко

Пример

Как понять

Как пишется

: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 советует

На собеседовании

Читайте также

Псевдоэлементы

Селектор по классу

Селектор потомка

`:active`

`:is()`

`:any-link`, `:link`, `:visited`

`:checked`

`:default`

`:dir()`

`:disabled`, `:enabled`

`:empty`

`:fullscreen`

`:focus` и `:focus-within`

`:has()`

`:hover`

`:indeterminate`

`:in-range` и `:out-of-range`

`:lang()`

`:not()`

`:optional` и `:required`

`:read-only` и `:read-write`

`:root`

`:target`

`:valid` и `:invalid`