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

Обновлено: 20.01.2023

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

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

  • Псевдокласс :active

    Псевдокласс :active

    Псевдокласс :active определяет стиль активного элемента. Это такое состояние элемента, которое происходит между щелчком и отпусканием клавиши мыши. В основном применяется к ссылкам и кнопкам, но ими не ограничен.

  • Псевдокласс :blank

    Псевдокласс :blank

    Псевдокласс :blank представляет пустые элементы, иными словами такие, которые не содержат дочерних элементов или текста. По своему действию похож на :empty, но :blank, в отличие от него, считает пустыми элементы, содержащие пробел или перенос строк.

  • Псевдокласс :checked

    Псевдокласс :checked

    Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox), флажки (radio) и пункты списка (option), когда они находятся в положение «включено». Переключение элементов в такое состояние происходит с помощью атрибута checked элемента <input> или пользователем.

  • Псевдокласс :default

    Псевдокласс :default

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

  • Псевдокласс :disabled

    Псевдокласс :disabled

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

  • Псевдокласс :empty

    Псевдокласс :empty

    Псевдокласс :empty представляет пустые элементы, иными словами такие, которые не содержат дочерних элементов, текста, пробелов или переносов строк. К примеру, <p></p> является пустым элементом, а <p> </p>, <p>&nbsp;</p> или <p>эге</p> уже нет.

  • Псевдокласс :enabled

    Псевдокласс :enabled

    Псевдокласс :enabled используется для применения стиля к доступным (не заблокированным) элементам форм. По умолчанию, все элементы форм являются доступными, если в коде HTML к ним не добавляется атрибут disabled.

  • Псевдокласс :first-child

    Псевдокласс :first-child

    Псевдокласс :first-child задаёт стиль первого элемента в группе братских элементов (имеющих одного родителя).

  • Псевдокласс :first-of-type

    Псевдокласс :first-of-type

    Псевдокласс :first-of-type задаёт стиль первого элемента определённого типа в группе братских элементов (имеющих одного родителя).

  • Псевдокласс :focus

    Псевдокласс :focus

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

  • Псевдокласс :focus-within

    Псевдокласс :focus-within

    Псевдокласс :focus-within определяет стиль элемента, когда он сам или элементы внутри него получают фокус. В отличие от :focus, который применяется непосредственно к самому элементу, :focus-within работает для родителя. Это позволяет выделять цветом или другими методами всю форму или отдельные её части, когда пользователь работает с полями формы.

  • Псевдокласс :fullscreen

    Псевдокласс :fullscreen

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

  • Псевдокласс :hover

    Псевдокласс :hover

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

  • Псевдоклас :in-range

    Псевдоклас :in-range

    Застосовується до елементів форм, у яких введене користувачем значення знаходиться в заздалегідь заданому діапазоні. Сам діапазон встановлюється за допомогою атрибутів min і max, вони, відповідно, задають мінімальне і максимальне значення.

  • Псевдокласс :indeterminate

    Псевдокласс :indeterminate

    Псевдокласс :indeterminate задаёт стиль для переключателей, когда они находятся в неопределённом состоянии. К примеру, если ни один переключатель не помечен, то они находятся в указанном состоянии. В реальности, стиль применяется только к элементам, у которых DOM-атрибут :indeterminate через JavaScript установлен в значение true. Также этот псевдокласс используется некоторыми браузерами для элемента <progress>.

  • Псевдокласс :invalid

    Псевдокласс :invalid

    Применяется к полям формы, содержимое которых не соответствует указанному типу. Например, для type="number" должно вводиться число, а не буквы, для type="email" корректный адрес электронной почты.

  • Псевдокласс :lang

    Псевдокласс :lang

    Определяет язык, который используется в документе или его фрагменте. С помощью псевдокласса :lang можно задавать определённые настройки, характерные для разных языков, например, вид кавычек в цитатах.

  • Псевдокласс :last-child

    Псевдокласс :last-child

    Псевдокласс :last-child задаёт стиль последнего элемента в группе братских элементов (имеющих одного родителя).

  • Псевдокласс :last-of-type

    Псевдокласс :last-of-type

    Псевдокласс :last-of-type задаёт стиль последнего элемента определённого типа в группе братских элементов (имеющих одного родителя).

  • Псевдокласс :link

    Псевдокласс :link

    Псевдокласс :link применяется к ссылкам, которые ещё не посещались пользователем, и задаёт для них стилевое оформление.

  • Псевдокласс :not

    Псевдокласс :not

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

  • Псевдокласс :nth-child

    Псевдокласс :nth-child

    Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.

  • Псевдокласс :nth-last-child

    Псевдокласс :nth-last-child

    Псевдокласс :nth-last-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-child отсчёт ведётся не от первого элемента, а от последнего.

  • Псевдокласс :nth-last-of-type

    Псевдокласс :nth-last-of-type

    Псевдокласс :nth-last-of-type используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-of-type отсчёт ведётся не от первого элемента, а от последнего.

  • Псевдокласс :nth-of-type

    Псевдокласс :nth-of-type

    Псевдокласс :nth-of-type используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов.

  • Псевдокласс :only-child

    Псевдокласс :only-child

    Псевдокласс :only-child применяется к дочернему элементу, только если он является единственным у родителя.

  • Псевдокласс :only-of-type

    Псевдокласс :only-of-type

    Псевдокласс :only-of-type применяется к дочернему элементу указанного типа, только если он единственный у родителя.

  • Псевдокласс :optional

    Псевдокласс :optional

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

  • Псевдокласс :out-of-range

    Псевдокласс :out-of-range

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

  • Псевдокласс :placeholder-shown

    Псевдокласс :placeholder-shown

    Определяет стиль элемента <input> или <textarea>, который в данный момент отображает текст подсказки, заданной атрибутом placeholder. Такая подсказка обычно исчезает при наборе текста.

  • Псевдокласс :read-only

    Псевдокласс :read-only

    Применяется к полям формы, у которых задан атрибут readonly. Такое поле не может быть модифицировано, при этом оно получает фокус, а данные в таком поле можно выделить и скопировать.

  • Псевдокласс :read-write

    Псевдокласс :read-write

    Применяется к полям формы, доступных для изменения. Псевдокласс :read-write является противоположным по своему действию :read-only, который применяется к полям с атрибутом readonly (только для чтения).

  • Псевдокласс :required

    Псевдокласс :required

    Применяет стилевые правила к элементу <input>, у которого установлен атрибут required, он позволяет выделять поля обязательные к заполнению перед отправкой формы.

  • Псевдокласс :target

    Псевдокласс :target

    Для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя идентификатора. К примеру, в адресе http://www.w3.org/TR/css3-selectors/#target-pseudo происходит переход к элементу, атрибут id которого задан как target-pseudo. Такая запись адреса называется «целевой элемент». Псевдокласс :target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.

  • Псевдокласс :valid

    Псевдокласс :valid

    Применяется к полям формы, содержимое которых проходит проверку в браузере на соответствие указанному типу. Например, для type="number" вводится число, а не буквы, для type="email" корректный адрес электронной почты.

  • Псевдокласс :visited

    Псевдокласс :visited

    Псевдокласс :visited применяется к ссылкам, уже посещённым пользователем, и задаёт для них стилевое оформление.