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

Время чтения: 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

Секция статьи ":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"

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

:checked

Секция статьи ":checked"

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

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

:default

Секция статьи ":default"

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

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

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

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

:dir()

Секция статьи ":dir()"

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

:disabled, :enabled

Секция статьи ":disabled, :enabled"

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

Позволяют находить элементы формы по состоянию их атрибута disabled. Почти эквивалентны селекторам по атрибуту ([disabled] и :not([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"

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

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

:has()

Секция статьи ":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 и введённое значение соответствует (:in-range) или нет (:out-of-range) этому диапазону.

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

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

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

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

:read-only и :read-write

Секция статьи ":read-only и :read-write"

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

:root

Секция статьи ":root"

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

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

:target

Секция статьи ":target"

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

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

:valid и :invalid

Секция статьи ":valid и :invalid"

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

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

Подсказки

Секция статьи "Подсказки"

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

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

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

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

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

        
        
          
        
      

На практике

Секция статьи "На практике"

Realetive советует

Секция статьи "Realetive советует"

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

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