Привет! Меня зовут София, я CSS-инженер.
В этот канал я нерегулярно и неравномерно пишу конспекты разделов спецификаций W3C и не только.
Автор канала - @ariarzer

О терминологии селекторов

Термин «селектор» может относиться к простому селектору, составному селектору, сложному селектору или списку селекторов.

Простой селектор - это отдельное условие для элемента. Селектор типа, универсальный селектор, селектор атрибутов, селектор класса, селектор идентификатора или псевдокласс - это простой селектор. Он представлен как <simple-selector> в грамматике селекторов.

Составной селектор - это последовательность простых селекторов, не разделенных комбинатором, и представляет собой набор одновременных условий для одного элемента. Если он содержит селектор типа или универсальный селектор, этот селектор должен быть первым в последовательности. В последовательности разрешен только один селектор типа или универсальный селектор. Составной селектор представлен как <compound-selector> в грамматике селекторов. Считается, что данный элемент соответствует составному селектору, если он соответствует всем простым селекторам в составном селекторе.

Комбинатор - это условие взаимосвязи между двумя составными селекторами. Комбинаторы в селекторах уровня 4 включают: комбинатор потомков (пробел), комбинатор прямых потомков (U+003E, >), комбинатор следующего элемента (U+002B, +) и комбинатор последующих элементов (U+007E, ~). Говорят, что два заданных элемента соответствуют комбинатору, если условие взаимосвязи между этими элементами истинно.

Сложный селектор - это последовательность из одного или нескольких составных селекторов, разделенных комбинаторами. Он представляет собой набор одновременных условий для набора элементов в определенных отношениях, описываемых его комбинаторами. Сложные селекторы представлены <complex-selector> в грамматике селекторов. Считается, что данный элемент соответствует сложному селектору, когда существует список элементов, каждый из которых соответствует соответствующему составному селектору в сложном селекторе, с каждой парой последовательные элементы в списке, соответствующих комбинатору между соответствующими составными селекторами, причем последний элемент является данным элементом.

Список селекторов - это список простых, составных или сложных селекторов, разделенных запятыми. Это также называется просто списком селекторов, когда тип не важен или указан в окружающем тексте; если тип важен и не указан, по умолчанию используется список сложных селекторов. Списки селекторов представоены <* - selector-list> в грамматике. Считается, что данный элемент соответствует списку селекторов, если он соответствует любому (по крайней мере, одному ) селекторов в этом списке селекторов.

#selectors

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

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

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

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

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

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

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

#selectors #pseudo_class

О тонкостях парсинга списка селекторов

Список селекторов, разделенных запятыми, представляет собой объединение всех элементов, выбранных каждым из отдельных селекторов этого списка. Например, когда несколько селекторов собержат одни и те же декларации, они могут быть сгруппированы в список, разделенный запятыми. Перед запятой и/или после нее может быть пробел или перенос строки.

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

/* то же самое что: */

h1, h2, h3 { font-family: sans-serif }

НО! Это работает только пока все селекторы в списке валидны. Как только один них ошибочен, дропается весь список.

h1 { font-family: sans-serif } /* работает */
h2.. { font-family: sans-serif } /* НЕ работает */
h3 { font-family: sans-serif } /* работает */

/* НЕ то же самое что: */

h1, h2.., h3 { font-family: sans-serif } /* НЕ работает*/

Зачем оно вообще надо?
Например, это важно помнить при использовании браузеро-специфичных псевдоэлеметов. По неясным мне пока причинам неизвестные псевдоэлементы браузер парсит как невалидные (если только они не начинаются с -webkit).
То есть, если написать такие селекторы по отдельности, первый распарситься и примернится в хроме, второй хром проигнорирует как невалидный, а FF сделает ровно наоборот:

input[type=range]::-webkit-slider-runnable-track {
background-color: orange;
}

input[type=range]::-moz-range-track {
background-color: orange;
}

Если же написать их в списке, то, признав второй селектор невалидным, хром дропнет весь список и декларации внутри ни к чему не будут применены:

input[type=range]::-webkit-slider-runnable-track,
input[type=range]::-moz-range-track {
background-color: orange;
}

#selectors

Дополнение к "О тонкостях парсинга списка селекторов"

Пусть и запоздало, но о будущей обратной совместимости все-таки подумали.

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

Поэтому новые фукнциональные псевдоклассы используют не <selector-list>, который при парсинге дропается если один из селекторов невалидный, а новую продукцию <forgiving-selector-list>.

Эта продукция анализирует каждый селектор в списке индивидуально, игнорируя те, которые не удалось проанализировать. Синтаксически это эквивалентно <any-value>?.

#selectors

Сделала довольно уродливую схему для более наглядной иллюстрации.

Функциональные псевдоклассы 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

Псевдоэлементы

Подобно тому, как псевдоклассы представляют дополнительную информацию о состоянии, не представленную непосредственно в DOM, псевдоэлемент представляет элемент, не присутствующий непосредственно в DOM.

Синтаксис псевдоэлемента: “::” (два символа U+003A COLON), за которым следует имя псевдоэлемента в качестве идентификатора. Имена псевдоэлементов не чувствительны к регистру. Запрещается использовать пробелы между двумя двоеточиями или между двоеточиями и именем.
Поскольку CSS уровня 1 и уровня 2 объединяют псевдоэлементы и псевдоклассы, разрешая синтаксис с одним двоеточием для обоих, юзер-агенты также должны принимать предыдущую нотацию с одним двоеточием для псевдоэлементов уровней 1 и 2 (::before , ::after, ::first-line и ::first-letter). Эта нотация не допускается ни для каких других псевдоэлементов и оставлена только для обратной совместимости.

Псевдоэлементы не существуют независимо в дереве: они всегда привязаны к другому элементу на странице, называемому их исходным элементом. Синтаксически псевдоэлемент следует сразу за составным селектором, представляющим его исходный элемент. Если этот составной селектор опущен, предполагается, что это универсальный селектор *.
Например, в селекторе div a::before элементы a, соответствующие селектору, являются исходными элементами для прикрепленных к ним псевдоэлементов ::before.

Когда псевдоэлемент встречается в селекторе, часть селектора перед псевдоэлементом выбирает исходный элемент для псевдоэлемента; часть селектора после него, если таковая имеется, применяется к самому псевдоэлементу.

#selectors #pseudo_elements

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

У меня теперь есть блог и в нем есть первая статья.

Про процесс вычисления значения css-свойства.

https://ariarzer.dev/css-value-processing.html

P.S. Что в телеграм по формату не лезет будет теперь там.

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

Показать пользвателю ошибку позволяет псевдокласс :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

Пару дней назад вышел первый рабочий черновик спецификации CSS Cascading and Inheritance 5 уровня.

Главное обновление - директива @ layer.

Написала о текущем ее состоянии и добавила пару примеров зачем оно может быть надо, если дойдет до браузеров :
https://ariarzer.dev/css-cascade-layer.html