Forgiving selector parsing using pseudo-elements

is there a way to use a forgiving selector like :is or :where with a ::pseudo-element using native CSS only? The documentation says that :is can't be used with pseudo-elements, but there may be another solution I can't catch yet?

Concretely, I try to avoid redundant code, like in this exemple:

[type="color"]::-webkit-color-swatch{
    border:none;
    border-radius:50%;
}
[type="color"]::-moz-color-swatch{
    border:none;
    border-radius:50%;
}

Something like this would be great, but it indeed doesn't works:

[type="color"]:is(::-webkit-color-swatch,::-moz-color-swatch){
    border:none;
    border-radius:50%;
}

Thanks, have a nice day! :)

Edit: the initial code is split in two selectors because of the unknown properties ::-webkit-color-swatch in Firefox and ::-moz-color-swatch in Chrome, merging them in a single selector makes the selector unavailable in both Firefox and Chrome, that's why I'm looking for a forgiving selector parsing like :is or :where (or at least an alternative)

Solution

You can use native CSS nesting here:

[type="color"] {
  &::-webkit-color-swatch,
  &::-moz-color-swatch{
    border:none;
    border-radius:50%;
  }
}

these are the browsers which support this, if this is good enough for you, then you can use it.

Edit:

As mentioned in the comment, if the -webkit and -moz selector are present in the same selector, the browser will invalidate it. So that means there is no way to "combine" the selectors.

You can use SCSS and create a mixin that generates this structure for you. Then you will only need to write it once in code and have SCSS generate the code from your initial question automatically.