Псевдоклассы в CSS
Понятие псевдокласса введено для расширения возможностей по выбору элемента из структуры документа и для создания динамических элементов на странице без использования JavaScript. Запись псевдокласса начинается с двоеточия
. Затем записывается имя класса, а далее при необходимости в круглых скобках указываются параметры.:
Псевдоклассы могут находиться в любом месте селектора. Если перед именем класса не указать тег, к которому надо применить стили, то они применяются ко всем тегам страницы. Некоторые псевдоклассы являются взаимоисключающими, в то время как другие могут применяться одновременно для одного и того же элемента. Псевдоклассы могут быть динамическими. То есть, в результате некоторых действий пользователя элемент может приобрести или потерять псевдокласс.
Динамические псевдоклассы
Динамические псевдоклассы приобретаются разными элементами при работе пользователя со страницей. Они делятся на два вида.
Псевдоклассы ссылок
Для любой ссылки доступны два класса, которые являются взаимоисключающими:
:link- Свойства применятся к непосещённым ссылкам.
:visited- Свойства применятся к ранее посещённым ссылкам.
Псевдоклассы действия
Для селектора доступно три псевдокласса, зависимых от действий пользователя. Не являются взаимоисключающими.
:hover- Состояние, когда на элемент наведен курсор мыши.
:active- Состояние активации элемента. Например, период между нажатием на левую кнопку мыши и её отжатием.
:focus- Применяется к активному полю формы.
Целевой псевдокласс :target
Иногда на сайтах используются ссылки с якорями, которые отправляют пользователя к нужному элементу страницы. Якорь - это идентификатор элемента, указанный после символа
. Если в адресе страницы есть якорь, то псевдокласс #:target применит свойства только к блоку с указанным идентификатором.
Псевдокласс языка :lang()
Для использования разных стилей в зависимости от языка элемента используется класс :lang(). В скобках указывается язык (например, en или ru). Язык элемента задается атрибутом lang в теге.
Псевдоклассы состояния
:enabled- Поля формы, значение которых можно изменить.
:disabled- Поля формы, значение которых изменить нельзя.
:checked- Применяется к отмеченным полям типа
"checkbox"или"radio". :indeterminate- Для неопределенного состояния элемента.
Структурные псевдоклассы
Понятие структурных псевдоклассов введено для выбора элемента из структуры документа на основе дополнительной информации, когда этого нельзя сделать с помощью простых селекторов.
Автономный текст не учитывается при расчете позиции дочернего элемента в списке всех детей родителя. При расчете позиции элемента в списке детей, нумерация начинается с 1.
:root- Задаёт свойства для корневого элемента страницы. В HTML это тег
<html>. :nth-child()- Позволяет выбрать дочерний элемент по его номеру в списке. Для этого в скобках указывается его позиция. Чтобы выбрать все нечётные теги необходимо параметром указать слово
odd, чётные -even. Ещё один вариант выбора элемента - использовать в качестве параметра формулуan+b, гдеaиbзадаются автором страницы, аn- натуральные числа (например,2n+1выберет все нечётные теги). :nth-last-child()- Аналогично
:nth-child(), только нумерация элементов идет с конца. :first-child- Для тега, если он первый из дочерних элементов.
:last-child- Для тега, если он последний из дочерних элементов.
:only-child- Для тега, который является единственным дочерним элементом родителя.
:nth-of-type()- Для работы со списком элементов указанного типа.
:nth-last-of-type()- Аналогично
:nth-of-type(), только нумерация элементов идет с конца. :first-of-type- Первый элемент указанного типа.
:last-of-type- Последний элемент указанного типа.
:only-of-type- Для тега, который является единственным дочерним элементом указанного типа.
:empty- Определяет тег, у которого нет дочерних элементов, то есть пустой тег.
Псевдокласс :not()
Свойства применяются ко всем элементам, кроме указанных в аргументе. Псевдокласс :not() в качестве аргумента принимает простой селектор. Использовать псевдоэлементы или псевдокласс :not() в качестве аргумента нельзя.