Привет! Меня зовут София, я 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

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