/ ↲
    Расширенный поиск

    CSS

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

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

    1. Кратко
    2. Пример
    3. Как это понять
    4. Как пишется
      1. :active
      2. :is()
      3. :any-link, :link, :visited
      4. :checked
      5. :default
      6. :dir()
      7. :disabled, :enabled
      8. :empty
      9. Псевдоклассы группы child
      10. Псевдоклассы группы type
      11. :fullscreen
      12. :focus и :focus-within
      13. :has()
      14. :hover
      15. :indeterminate
      16. :in-range и :out-of-range
      17. :lang()
      18. :not()
      19. :optional и :required
      20. :read-only и :read-write
      21. :root
      22. :target
      23. :valid и :invalid
    5. Подсказки
    6. На практике
      1. Realetive советует

    Кратко

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

    Пример

    Рассмотрим 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-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 находит любой <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 или, например, создавать собственный стиль для контролов формы:

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