Использование селекторов псевдоклассов
9 февраля 2018 | Опубликовано в css | 12 Комментариев »
Селекторы псевдоклассов влияют на элементы в определенных состояниях, например, запись 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
Перевод — Дежурка
Смотрите также:
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
549