Is there a way to streamline CSS code using forgiving selectors like :is or :where with pseudo-elements in native CSS only? The documentation states that :is cannot be used with pseudo-elements, but I'm wondering if there's another solution that I haven't discovered yet.
For example, I am trying to prevent redundant code, as seen here:
[type="color"]::-webkit-color-swatch{
border:none;
border-radius:50%;
}
[type="color"]::-moz-color-swatch{
border:none;
border-radius:50%;
}
It would be ideal if something like this worked, but unfortunately it does not:
[type="color"]:is(::-webkit-color-swatch,::-moz-color-swatch){
border:none;
border-radius:50%;
}
Thank you and have a great day! :)
Edit: The initial code is divided into two selectors due to the different properties ::-webkit-color-swatch in Firefox and ::-moz-color-swatch in Chrome. Combining them into a single selector renders it ineffective in both browsers. Hence, I am seeking a forgiving selector parsing method like :is or :where, or an alternative approach.