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

Все разработчики прекрасно знают, что такое псевдоклассы или псевдоселекторы в CSS. Это то, что обычно пишут через двоеточие после селектора. Самые популярные псевдоклассы :link, :hover, :visited и :active

Такие конструкции в CSS, как правило, можно встретить в каждом файле стилей, но их использование ограничивается лишь описанием состояния ссылок и не более того. В общем, тема псевдоселекторов еще не обсуждалась на нашем сайте, так что самое время приступить.

Итак, как я уже сказал, веб-разработчики используют псевдоклассы в основном для задания стилей ссылок, например :link для непосещенной ссылки, :hover для ссылки при наведении, :active для нажатой и удерживаемой ссылки и :visited для посещенной. Кстати, у нас есть отличная статья про оформление ссылок, рекомендую. Идем дальше. Как вы думаете, сколько, помимо этих четырех, существует псевдоклассов? :first-child, last-child? Кто еще? Все? А на самом деле всего их 33. Рассмотрим все детально.

Название и назначение псевдоклассов

:link — отвечает за стили непосещенной ссылки;

:hover — состояние объекта (не обязательно ссылки) при наведении на него мышкой;

:active — состояние активного объекта (например, для ссылки и зажатие ее мышкой);

:visited — состояние посещенной ссылки;

:focus — когда вы используете какой-то объект на страницы, то на нем устанавливается фокус (в случае и текстовым поле это постановка курсора в это поле);

:first-child — первый дочерний элемент текущего элемента;

:last-child — соответственно, последний дочерний элемент чего-то;

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

:nth-child() — какой-то по счету с начала дочерний элемент, например p:nth-child(4);

:nth-last-child() — аналогично, только отчет с конца; интересно, что в этом и предыдущем селекторах можно задавать не только конкретные цифры, но и счетность, к примеру вот так: ul li:nth-last-child(2n+1);

:lang() — если у элемента указан язык (с помощью атрибута lang, например lang="en"), то этот элемент можно выбрать так;

:root — дает указание применить стиль к корневому элементу (в html документе это тег );

:not() — дает ограничение на применение стилей по селектору (то есть селектор .red-block:not(div) применит указанный стиль ко всем элементам с классом .red-block, только если этот элемент не div);

:empty — выбирает пустые элементы;

:first-of-type — применяет стиль к первому элементу этого типа, то есть если у вас есть два дива, стиль будет работать только для первого из них;

:last-of-type — аналогично предыдущему, только для последнего элемента;

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

:nth-of-type() — выбирает указанный по счету с начала элемент текущего типа;

:nth-last-of-type() — тоже самое, но отсчет с конца;

:target — например, если у вас адрес имеет вид index.html#anchor, то этот псевдо класс задаст правило для элемента с id="anchor";

:enabled — выбирает активные инпуты;

:disabled — а этот неактивные;

:checked — отмеченные чекбоксы и выбранные радиобаттоны;

:indeterminate — для радиобаттонов и чекбоксов опеределяет состояние, когда они «никакие», то есть ни выбраны, ни не выбраны

:default — элемент по-умолчанию, например кнопка отправки формы;

:valid — стиль для правильного инпута (когда указана data type в HTML 5);

:invalid — когда, соответственно, инпут невалиден;

:in-range — когда значение инпута находиться в заданных границах (type="range", задан min и max, но это все только в HTML 5);

:out-of-range — когда не попадает в границы;

:required — все обязательные поля;

:optional — все необязательные;

:read-only — те элементы, которые доступны только для чтения;

:read-write — для чтения и записи.

Ну что, классно? Сообщения о валидации формы можно без JS выводить, подсвечивать активные поля, писать меньше кода — эх, красота была бы, если это бы добро работало везде. Поддержка псевдоселекторов в разных браузерах

Как вы понимаете, ограниченность использование псевдоклассов не так просто появилась, вызвана она частичной их поддержкой в браузерах. Чего уж говорить про какой-нибудь :out-of-range, если даже :active достаточно странно работает в нашем любимом ИЕ.

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

Поделитесь статьей со своими друзьями