Псевдокласс в 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() | ||||||||||||||