Прощающий анализ селектора с использованием псевдоэлементов
Есть ли способ использовать прощающий селектор, например :is или :where, с псевдоэлементом ::, используя только собственный CSS? В документации сказано, что :is нельзя использовать с псевдоэлементами, но может быть другое решение, которое я пока не могу найти?
Конкретно, я стараюсь избегать избыточного кода, как в этом примере:
[type = "color"]::-webkit-color-swatch{
border:none;
border-radius:50%;
}
[type = "color"]::-moz-color-swatch{
border:none;
border-radius:50%;
}
Что-то вроде этого было бы здорово, но это действительно не работает:
[type = "color"]:is(::-webkit-color-swatch,::-moz-color-swatch){
border:none;
border-radius:50%;
}
Спасибо хорошего дня! :)
Обновлено: исходный код разделен на два селектора из-за неизвестных свойств ::-webkit-color-swatch в Firefox и ::-moz-color-swatch в Chrome, объединение их в один селектор делает селектор недоступным как в Firefox, так и в Chrome, поэтому я ищу щадящий анализ селектора. типа :is или :where (или хотя бы альтернатива)
Ответы 1
Вы можете использовать встроенную вложенность CSS здесь:
[type = "color"] {
&::-webkit-color-swatch,
&::-moz-color-swatch{
border:none;
border-radius:50%;
}
}
это браузеры, которые поддерживают это, если вас это устраивает, вы можете использовать его.
Редактировать:
Как упоминалось в комментарии, если селекторы -webkit и -moz присутствуют в одном и том же селекторе, браузер сделает его недействительным. Это означает, что нет возможности «объединить» селекторы.
Вы можете использовать SCSS и создать примесь, которая сгенерирует для вас эту структуру. Тогда вам нужно будет написать его только один раз в коде, и SCSS автоматически сгенерирует код из вашего первоначального вопроса.
Здравствуйте, спасибо за ваш ответ! Но исходный код разделен на два селектора из-за неизвестных свойств ::-webkit-color-swatch в Firefox и ::-moz-color-swatch в Chrome, объединение их в один селектор делает селектор недоступным как в Firefox, так и в Chrome. Этот синтаксис снова объединяет ::-webkit- и ::-moz- в одном и том же селекторе, поэтому Firefox и Chrome не могут его проанализировать.
См. мои изменения, в этом случае я не думаю, что вы сможете добиться желаемого результата без использования SCSS (и даже тогда результат будет таким же, как в вашем первоначальном сообщении).
Я так не думаю. Насколько я понимаю, то, как псевдоэлементы были определены в селекторах как компонент составного селектора, а не как компонент сложного селектора, было некоторой ошибкой проектирования, из-за которой поддержка этого в настоящее время слишком сложна. Я думаю, что эту ошибку сначала нужно будет исправить, если это вообще возможно.