Псевдоклассы

Псевдоклассы - это простые селекторы, которые разрешают выбор на основе информации, которая находится за пределами DOM или которую может быть неудобно или невозможно выразить с помощью других простых селекторов. Они также могут быть динамическими в том смысле, что элемент может приобретать или терять псевдокласс, когда пользователь взаимодействует с документом, без изменения самого документа.

Синтаксис псевдокласса состоит из ":" (U + 003A COLON), за которым следует имя псевдокласса в качестве идентификатора CSS, и, в случае функционального псевдокласса, пара круглых скобок, содержащих свои аргументы.

Например: valid - это обычный псевдокласс, а lang () - это функциональный псевдокласс.

Как и все ключевые слова CSS, имена псевдоклассов не чувствительны к регистру. Запрещается использовать пробелы между двоеточием и именем псевдокласса, а также, как обычно для синтаксиса CSS, между именем функционального псевдокласса и его открывающими скобками (которые, таким образом, образуют `<function-token>`). Также, как обычно, разрешены пробелы вокруг аргументов внутри скобок функционального псевдокласса, если для конкретного псевдокласса не указано иное.

Как и другие простые селекторы, псевдоклассы разрешены во всех составных селекторах, содержащихся в селекторе, и должны следовать за селектором типа или универсальным селектором, если таковой имеется.

Некоторые псевдоклассы являются взаимоисключающими, то есть составной селектор, содержащий их, хотя и действителен, никогда не будет соответствовать чему-либо.

#selectors #pseudo_class

Функциональные псевдоклассы is() и where()

Псевдокласс match-any :is() - это функциональный псевдокласс, принимающий <forgiving-selector-list> в качестве единственного аргумента.
Он сопостовляется с любым селектором из переданного списка, но его специфичность равна наибольшей среди элементов списка. Поясним на примере.

С первого взгляда можно подумать что это просто синтаксический сахар :is(.a, .b) .c === .a .c, .b .c. Однако :is(#id, .b) .c !== #id .c, .b .c.

То есть вот в такой ситуации цвет будет красный:

<div class="a">Lorem</div>
<style>
:is(#id, .a) {color: red;}
.a {color: blue;}
</style>

Псевдокласс регулировки специфичности :where() - это функциональный псевдокласс с тем же синтаксисом и функциональностью, что и :is(). НО, в отличие от :is(), ни псевдокласс :where (), ни какие-либо из его аргументов не влияют на специфичность селектора - она всегда равна нулю.

Иллюстрируем тем же примером, цвет будет синий:

<div class="a">Lorem</div>
<style>
:where(#id, .a) {color: red;}
.a {color: blue;}
</style>

Оба псевдокласса поддерживаются в FireFox начиная c 78 версии и в Safari c 14.

#selectors #pseudo_class #function_pseudo_class

Не тыкать в пользователя ошибками, пока он ничего не сделал

Показать пользвателю ошибку позволяет псевдокласс :invalid. Он соответствует инпустам, значение которых не валидно.

В этом примере инпут, если он пустой, будет иметь класный фон:

<input required type="text">
<style>
:invalid {
background-color: red;
}
</style>

Так при первом заходе пользователя на страницу поле будет уже подсвечено красным цветом. А он даже не прочитал что надо вводить и вообще что это за сайт. Неприятно.

Решение: в новом черновике спецификации селекторов описан класс :user-invalid. Он соответствует тем полям, с которыми пользователь провзаимодействовал + срабатывает также после нажатия на button[type="submin"] или input[type="submin"].

В этом примере поле подсветится красным только когда пользователь что-то в него введет, удалит и уберет фокус, или после нажания на кнопку отправки формы:

<form action="">
<label>
Text
<input required type="text">
</label>
<button type="submin">Submit</button>
</form>
<style>
input:user-invalid {
background-color: red;
}
</style>

Прежде чем вы попытались опробовать этот пример в деле: сейчас это так НЕ работает. Поддержки селектора нет почти нигде. Только частично за префиксом в FireFox под другим именем. Подробнее на MDN про :-moz-ui-invalid.

#selectors #pseudo_class

Источник: https://drafts.csswg.org/selectors-4/#user-pseudos