Псевдоклассы - это дополнения к обычным селекторам для еще более точной выборки элементов на странице по каким-то необычным или специфическим условиям. Например, условием может быть динамическое состояние элемента (например состояние наведения курсора мышки на элемент). Еще пример условия – это порядковый номер элемента (например четные и нечетные строки таблицы) и т.д.
Псевдоклассы состояний
Первыми рассмотрим псевдоклассы состояний, которые применяются после действий пользователя. При этом “действием” может считаться и отсутствие действия, например, в случае с непосещенной ссылкой.
Псевдокласс :link представляет нормальное состояние ссылок и используется для выделения ссылок, которые до сих пор не посещены. В стилях рекомендуется объявлять этот псевдокласс перед всеми остальными классами этой категории.
a:link {color: orange;}
Псевдокласс :visited используется для стилизации ссылок, уже посещенных пользователем. В стилях он указывается вторым, после псевдокласса :link:
a:visited {color: blue;}
Псевдокласс :hover используется для стилизации элемента, на который в данный момент наведен курсор. Это может быть любой элемент, хотя применение этого псевдокласса для ссылок является самым распространенным случаем.
a:hover {color: orange;}
Псевдокласс :active используется для стилизации “активированных” элементов, путем нажатия мыши или касания к экрану. Активация также может производиться и с клавиатуры, также как в случае с псевдоклассом :focus. Он и работает аналогично :focus, с единственной разницей, что псевдокласс :activeфиксирует событие между нажатием и отпусканием клавиши мыши.
Оно следует четвертым в стилях (после :hover).
a:active {color: rebeccapurple;}
Псевдокласс :focus используется для стилизации элемента, получившего фокус с помощью курсора, касания или нажатия на клавиатуре. Он часто используется в элементах форм.
a:focus {color: green;}
Структурные псевдоклассы
Структурные псевдоклассы направлены на дополнительные данные в дереве документа или DOM и не могут быть заменены другим типом селекторов или их комбинацией.
Псевдокласс :first-child выделяет элемент, который является первым потомком своего родительского элемента.
li:first-child {color: orange;}
Псевдокласс :last-child выделяет элемент, которыя является последним дочерним элементом в родительском контейнере.
li:last-child {color: orange;}
Псевдокласс :first-of-type выделяет первый элемент своего типа в указанном родительском контейнере.
ul :first-of-type {color: orange;}
Псевдокласс :last-of-type выделяет последний элемент своего типа в родительском контейнере.
ul :last-of-type {color: orange;}
Псевдокласс :nth-child выделяет один или более элементов в зависимости от их порядкового номера в разметке. Это один из самых универсальных и надежных псевдоклассов в CSS. Все псевдоклассы :nth принимают аргумент в виде формулы в скобках. Формула может быть просто целым числом, может структурироваться в виде an+b или использовать ключевое слово odd или even.
В формуле an+b:
- a это целое число;
- n это литерал (т.е. мы просто используем букву n внутри формулы);
- + это оператор (это может быть как +, так и -);
- b это целое число, используемое только при использовании оператора.
Например: ol :nth-child(2) {color: orange;}
Псевдокласс :nth-of-type схож с :nth-child с той разницей, что он обладает большей специфичностью, так как выбирает конкретный тип элемента внутри родительского контейнера.
p:nth-of-type(2) {color: orange;}
Псевдокласс :nth-last-child работает аналогично :nth-child, но выбирает элементы не с начала, а с конца.
ol :nth-last-child(2) {color: orange;}
Псевдокласс :nth-last-of-type делает то же, что и :nth-of-type, но отсчитывая с конца.
p:nth-last-of-type(2) {color: orange;}
Псевдокласс :only-child выбирает единственного потомка родительского элемента.
ul :only-child {color: orange;}
Псевдокласс :only-of-type выбирает элемент, у которого нет соседних элементов того же типа. Он похож на :only-child, но более осмыслен за счет указания конкретного элемента.
li:only-of-type {color: orange;}
Псевдокласс :not также известен как псевдокласс-отрицание. Он принимает в скобках аргумент - другой селектор. Этим аргументом может быть и другой псевдокласс. Аргументы могут составлять цепочку, но сам :not не может в этой цепочке передаваться в качестве аргумента.
li:not(.first-item) {color: orange;}
Псевдокласс :target выбирает элемент, ID которого используется в качестве хэша в URL.
:target {background: yellow;}
Псевдоклассы валидации
С помощью псевдоклассов валидации, мы можем сделать процесс заполнения форм более плавным и приятным.
Заметьте, что несмотря на то, что большинство псевдоклассов этого раздела работают с элементами форм, некоторые из них могут работать и с другими элементами HTML.
Псевдокласс :checked выбирает радиокнопки, чекбоксы и опции, которые были отмечены пользователем.
Псевдокласс :default выбирает элемент, заданный в качестве дефолтного в группе похожих элементов.
Псевдокласс :disabled выбирает отключенный элемент формы (элемент, который пользователь не может выделить, отметить, активировать или перенести на него фокус).
:disabled {opacity: 0.5;}
Псевдокласс :enabled выбирает элементы, включенные для пользователя; по умолчанию все элементы формы включены, если в разметке им не задан атрибут disabled.
:enabled {opacity: 1; border: 1px solid green;}
Псевдокласс :empty выбирает элементы, в которых нет никакого содержимого. Если в элемент есть другой элемент HTML, символ или пробел, элемент не считается пустым.
div:empty {background: yellow;}
