Question 372466 in CSS Question posted in
Some basic documentation can be found here.

Css – 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)

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    Css solution only:

    [type="color"]::-moz-color-swatch, [type="color"]::-webkit-color-swatch {
    border:none;
    border-radius:50%;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search