Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

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

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 Задает свойства элементам форм, которые выбраны, таким как радиокнопки и переключатели-флажки.

Обратите внимание на то, что псевдоселекторы могут быть использованы вместе, например: a:visited:hover.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:




Оставить ответ


6 − = ноль

Вставить изображение