Главная » Языки программирования

Что такое псевдоклассы css

На чтение 9 мин
Содержание
  1. Псевдоклассы в CSS
  2. Синтаксис
  3. :hover
  4. :visited
  5. :focus
  6. :first-child и :last-child
  7. :nth-child
  8. odd и even
  9. Счётчик n
  10. n + 1
  11. Другие псевдоклассы
  12. Псевдоклассы
  13. Кратко
  14. Пример
  15. Как понять
  16. Как пишется
  17. :active
  18. :is ( )
  19. :any — link , :link , :visited
  20. :checked
  21. :default
  22. :dir ( )
  23. :disabled , :enabled
  24. :empty
  25. Псевдоклассы группы child
  26. Псевдоклассы группы type
  27. :fullscreen
  28. :focus и :focus — within
  29. :has ( )
  30. :hover
  31. :indeterminate
  32. :in — range и :out — of — range
  33. :lang ( )
  34. :not ( )
  35. :optional и :required
  36. :read — only и :read — write
  37. :root
  38. :target
  39. :valid и :invalid
  40. Подсказки
  41. На практике
  42. Realetive советует

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

Ко всем этим селекторам могут прикрепляться псевдоклассы. Псевдокласс:

  • определяет конкретное состояние элемента;
  • это ключевое слово, которое начинается с двоеточия.

Синтаксис

Псевдокласс не может существовать сам по себе. Он должен быть прикреплён к селектору. Псевдокласс будет определять только определённое состояние этого селектора.

Синтаксис выглядит следующим образом:

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

:hover

К примеру, типовым используемым псевдоклассом является :hover , который будет применять стиль, когда на целевой элемент наводится указатель мыши. Давайте проверим это на ссылках.

Наведите курсор на эту ссылку и увидите, как она становится красной.

Вторая строка ориентирована на те же элементы HTML, но только, когда происходит что-то конкретное (в данном случае, наведение).

:visited

Этот псевдокласс нацеливается на ссылки, которые уже были посещены. По умолчанию ссылки отображаются синими и при посещении становятся фиолетовыми. Результаты Google работают так же.

Google Twitter Facebook Mozilla MarkSheet

Менять цвет посещённых ссылок часто забывают, но пользователям так удобнее просматривать список результатов. Это помогает им легко определять, где они уже были.

:focus

Данный псевдокласс происходит, когда элемент HTML получает фокус. Это особенно полезно для полей форм.

Правило outline: none удаляет свечение вокруг поля.

:first-child и :last-child

Эти псевдоклассы связаны с иерархией в HTML. Они нацеливаются на элементы HTML в зависимости от порядка, в котором они появляются в коде.

Если бы нам понадобилось добавить пятый пункт списка, то применяя тот же CSS, стилизация автоматически изменится.

:nth-child

Данный псевдокласс является глобальной версией :first-child и :last-child . С помощью :nth-child вы можете вычислить конкретный дочерний целевой элемент.

К примеру, если вы хотите нацелиться на второй дочерний элемент, то используйте :nth-child(2) .

odd и even

Кроме использования чисел, :nth-child поставляется с двумя ключевыми словами:

  • :nth-child(odd) нацелится на каждый нечётный элемент;
  • :nth-child(even) нацелится на каждый чётный элемент.

Счётчик n

Мощным аспектом :nth-child является то, что он может нацелиться на элементы, основываясь на расчётах с помощью ключевого слова n .

Значение n повышается от 0 до количества представленных дочерних элементов.

Что делать, если вы хотите нацелиться на каждый третий элемент?

В нашем случае n начинается с нуля и заканчивается шестью.

Компьютеры начинают отсчёт с нуля. И поскольку в нашем списке семь элементов, мы будем считать до шести, потому что 0-1-2-3-4-5-6 представляют семь пунктов.

Читайте также:  Css height document height

Вы можете прочитать :nth-child(3n) как «нацелиться на каждый элемент, положение которого делится на 3». В нашем случае, это третий и шестой пункт списка:

  • 3 умножить на 0 равен нулю;
  • 3 умножить на 1 — третий пункт;
  • 3 умножить на 2 — шестой пункт.

n + 1

Что делать, если вы хотите нацелиться на первый пункт и каждый третий пункт после него?

3n + 1 состоит из двух частей:

  • 3n выбирает каждый третий пункт;
  • +1 смещает начало на 1.

Вот как были выполнены вычисления:

  • 3 умножить на 0 плюс 1 равно 1;
  • 3 умножить на 1 плюс 1 равно 4;
  • 3 умножить на 2 плюс 1 равно 7.

Счётчик n является очень гибким. Если вычисления делать сложно, то просто протестируйте, чтобы получить правильную выборку.

Другие псевдоклассы

Есть десятки доступных псевдоклассов, некоторые из них предназначены для очень специфичных состояний. Мы описали наиболее используемые из них.

Источник

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

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

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

    Скопировать ссылку «: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» Скопировано

    :checked

    Скопировать ссылку «:checked» Скопировано

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

    :default

    Скопировать ссылку «:default» Скопировано

    Применяется к элементам формы ( , , и ), у которых можно задать начальное состояние.

    Например, у селектор применится к тому чекбоксу, у которого в разметке установлен атрибут checked , т. е. он по умолчанию выбран:

     :default + span  color: #2E9AFF;> :default + span  color: #2E9AFF; >

    :dir ( )

    Скопировать ссылку «:dir()» Скопировано

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

    :disabled , :enabled

    Скопировать ссылку «:disabled, :enabled» Скопировано

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

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

    • , отображающий, что не все пункты вложенной группы были выделены.
    • Группа с одинаковым name , но у которой ни один элемент не установлен в checked .
    • .

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

    :in — range и :out — of — range

    Скопировать ссылку «:in-range и :out-of-range» Скопировано

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

    :lang ( )

    Скопировать ссылку «:lang()» Скопировано

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

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

     :lang(ar)  hyphens: none;> :lang(ar)  hyphens: none; >

    :not ( )

    Скопировать ссылку «:not()» Скопировано

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

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

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

    :optional и :required

    Скопировать ссылку «:optional и :required» Скопировано

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

    :read — only и :read — write

    Скопировать ссылку «:read-only и :read-write» Скопировано

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

    :root

    Скопировать ссылку «:root» Скопировано

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

    :target

    Скопировать ссылку «:target» Скопировано

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

    :valid и :invalid

    Скопировать ссылку «:valid и :invalid» Скопировано

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

    Подсказки

    Скопировать ссылку «Подсказки» Скопировано

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

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

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

     nav:hover a  font-size: 120%;> nav:hover a  font-size: 120%; >

    На практике

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

    Realetive советует

    Скопировать ссылку «Realetive советует» Скопировано

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

    Источник

Оцените статью
© 2023 Программирование