Псевдокласс в CSS
Псевдоклас это добавленное к селектору особое состояние в котором находится html элемент в данный момент.
Например нам нужно задать цвет для элемента html с определеным селектором над которым сейчас находится курсор:
div:hover {background-color: #F89B4D;}
Псевдо-классы
Особенность псевдокласов в том они не указываются в разметке HTML-документа. Синтаксис написания - всегда начинаются с двоеточия ':'.
Псевдо-класс | Пример | Описание | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
:link | a:link | Выбор всех не посещенных ссылок. | ||||||||||||||
:active | a:active | Спрацьовує коли над елементом натискується кнопка миші | ||||||||||||||
:hover | a:hover | Выбор ссылки при наведении курсора мышки. Вместо `<a>` может быть любой элемент | ||||||||||||||
:visited | a:visited | Коли вже відкривали сторінку по цій силці | ||||||||||||||
:focus | input:focus | Вибране зараз поле | ||||||||||||||
По расположению на одном уровне | ||||||||||||||||
:first-child | *:first-child | Любой первый элемент в блоке. | ||||||||||||||
:last-child | *:last-child | Любой последний элемент в блоке. | ||||||||||||||
:only-child | *:only-child | Любой элемент в блоке, если там всего один элемент. | ||||||||||||||
:nth-child(n) |
|
|||||||||||||||
:nth-last-child(n) | *:nth-last-child(2) | Любой второй элемент в блоке с конца. | ||||||||||||||
По расположению на одном уровне с тем же тегом | ||||||||||||||||
:first-of-type | p:first-of-type | Выбор первого дочернего элемента <p>. | ||||||||||||||
:last-of-type | p:last-of-type | Выбор последнего дочернего элемента <p>. | ||||||||||||||
:only-of-type | p:only-of-type | Выбор дочернего элемента <p>, если у родителя элемент <p> всего один. | ||||||||||||||
:nth-of-type(n) | p:nth-of-type(2) | Выбор второго дочернего элемента <p>. | ||||||||||||||
:nth-last-of-type(n) | p:nth-last-of-type(2) | Выбор второго дочернего элемента <p> с конца. | ||||||||||||||
Поля форм | ||||||||||||||||
:enabled | input:enabled | Выбор включенного <input>. Обычно ``:enabled`` просто не пишется. | ||||||||||||||
:disabled | input:disabled | Выбор выключенного <input>. | ||||||||||||||
:default | input:default | Выбор пустого <input> без значений. | ||||||||||||||
:focus | input:focus | Выбор <input>, который находится в фокусе (в который установлен курсор). | ||||||||||||||
:focus-within | input[type="focus-within"] | Выделит родителя в котором находится input | ||||||||||||||
:checked | input[type="checkbox"] | Выбранный элемент <input> типа radio или checkbox. | ||||||||||||||
:optional | input:optional | находит любые <input> элементы, у которых не установлен атрибут required. | ||||||||||||||
:indeterminate | input:indeterminate | выберет элементы <input type="checkbox">, свойство indeterminate которых было установлено в true через jаvascript | ||||||||||||||
:in-range | input:in-range | показывает значения placeholder="" в зоне допустимых значений | ||||||||||||||
:out-of-range | input:out-of-range | показывает значения placeholder="" за зоной допустимых значений | ||||||||||||||
:required | input:required | находит любые <input> элементы, имеющие атрибут required. | ||||||||||||||
:read-only | :read-only | находи в input и textarea элементы, недоступные для редактирования пользователем. | ||||||||||||||
:read-write | :read-write | находи в input и textarea элементы, доступные для редактирования пользователем. | ||||||||||||||
:invalid | form:invalid | находит любые <input> или <form> элементы, контент которых не проходит валидацию | ||||||||||||||
:valid | form:valid | находит любые <input> или <form> элементы, контент которых валиден | ||||||||||||||
Остальные | ||||||||||||||||
:root | :root | Выбор корневого элемента в документе. | ||||||||||||||
:defined | p:defined | выбор элемента определеного методом customElements.define | ||||||||||||||
:empty | p:empty | Пустой элемент <p>, в котором нет ни текста ни элементов. (тоисть без потомков) | ||||||||||||||
:lang(язык) | p:lang(ru) | Выбор элемента <p> с атрибутом lang, значение которого начинается с "ru". | ||||||||||||||
:target | :target | Выбор активного элемента на странице, который имеет якорную ссылку. | ||||||||||||||
:not(селектор) | :not(p) | Выбор всех элементов, кроме <p>. Примеры использования :not() |