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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

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

Вместо:

        
          
          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 {
  /* … */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

• Основная статья про :link;
• Основная статья про :visited.

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

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

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

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

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

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

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

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

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

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

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

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

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

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

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

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

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

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

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

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

На практике

Скопировать ссылку на секцию "На практике" Скопировано

Realetive советует

Скопировать ссылку на секцию "Realetive советует" Скопировано

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

+ Развернуть