Псевдоклас это добавленное к селектору особое состояние в котором находится html элемент в данный момент.
Например нам нужно задать цвет для элемента html с определенным селектором над которым сейчас находится курсор:
div:hover {background-color: #F89B4D;}Псевдо-классы
Особенность псевдокласов в том они не указываются в разметке HTML-документа. Синтаксис написания — всегда начинаются с двоеточия ‘:‘.
| Псевдо-класс | Пример | Описание |
|---|---|---|
| :link | a:link | Выбор всех не посещенных ссылок. |
| :active | a:active | Выбор активной ссылки. |
| :hover | a:hover | Выбор ссылки при наведении курсора мышки. Вместо `<a>` может быть любой элемент |
| По расположению на одном уровне | ||
| :first-child | *:first-child | Любой первый элемент в блоке. |
| :last-child | *:last-child | Любой последний элемент в блоке. |
| :only-child | *:only-child | Любой элемент в блоке, если там всего один элемент. |
| :nth-child(n) | *:nth-child(2)Любой второй элемент в блоке.*:nth-child(2n)Любые элементы в блоке по счету: 2, 4, 6, … (чётные).*:nth-child(even)Любые элементы в блоке по счету: 2, 4, 6, … (чётные).*:nth-child(2n+1)Любые элементы в блоке по счету: 1, 3, 5, … (нечётные).*:nth-child(odd)Любые элементы в блоке по счету: 1, 3, 5, … (нечётные).*:nth-child(3n+2)Элементы номер 2, 5, 8 и так далее. | |
| :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() |