Использование селекторов псевдоклассов

9 февраля 2018 | Опубликовано в css | Нет комментариев »

Селекторы псевдоклассов влияют на элементы в определенных состояниях, например, запись a:hover контролирует внешний вид ссылок в момент прикосновения к ним на мобильном устройстве или при наведении указателя мыши на компьютере. В отличие от селекторов псевдоэлемента, которые контролируют внешний вид части содержимого элемента, такой как первая строка или первая буква абзаца.

В таблице ниже находятся все текущие селекторы псевдоклассов в CSS, у некоторых из которых есть ссылки на дополнительную информацию:

Список селекторов псевдолассов

Селектор псевдокласса	Цель
:link	Контролирует внешний вид непосещенных ссылок. Сильно связан с элементом ссылки, до той степени, что элемент ссылки, использованный без других псевдоселекторов перед заданием стилей, контролирует то же самое.
:visited	Контролирует внешний вид посещенных ссылок. По соображениям безопасности существует много ограничений на применение стилей.
:hover	Контролирует внешний вил элемента при наведении на него указателя мыши или другого указывающего устройства. Хотя он сильно связан с элементов ссылки, в CSS такая связь не указана. В современных версиях браузеров этот псевдокласс может быть применен к любому элементу, например к изображению, следующим образом: img:hover.
:active	Контролирует внешний вид содержимого, пока пользователь нажимает на него, т. е. между моментами, когда кнопка мыши нажимается и отпускается. Используется редко, так как эффект обычно очень кратковременный.
:first-child	Выбирает элемент первого потомка из последовательности разметки. Например, запись ul li:first-child задаст стили для первого элемента списка в любом ненумерованном списке.
:last-child	Выбирает элемент последнего потомка из последовательности разметки.
:nth-child(n)	Выбирает каждый элемент или элементы потомка из последовательности разметки, который соответствует (n), где n может быть словом, таким как odd (нечетный) или even (четный), числом, или математическим выражением.
:nth-of-type(n)	Выбирает каждое n-ное появление определенного элемента.
:focus	Задает стили ссылкам, которые были выбраны с помощью клавиатуры и выбранным элементам форм, таким как поля ввода.
:only-child	Выбирает элемент, только если он единственный потомок родительского элемента.
:first-of-type	Выбирает первый элемент заданного типа.
:last-of-type	Выбирает последний элемент заданного типа.
:only-of-type	Выбирает элемент, только если он единственный потомок заданного типа родительского элемента.
:nth-last-child(n)	Отсчитывает назад от конца в группе потомков.
:nth-last-of-type(n)	Отсчитывает назад от конца в группе потомков заданного типа.
:not(S)	Соответствует элементам, которые не (S).
:valid	Состояние элемента форм с содержимым, которое считается соответствующим определенной схеме символов и чисел.
:invalid	Состояние элемента форм с содержимым, которое считается несоответствующим.
:checked	Задает свойства элементам форм, которые выбраны, таким как радиокнопки и переключатели-флажки.