.
О тонкостях парсинга списка селекторов
Список селекторов, разделенных запятыми, представляет собой объединение всех элементов, выбранных каждым из отдельных селекторов этого списка. Например, когда несколько селекторов собержат одни и те же декларации, они могут быть сгруппированы в список, разделенный запятыми. Перед запятой и/или после нее может быть пробел или перенос строки.
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;
}