What does :where(:root) mean in SCSS

September 8, 2022

I have an example code with :where(:root)

:where(:root) {
    //code
}

I know about :root, but not about :where().

I can’t find anything on google. What it does actually?

>Solution :

The :where() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.

/* Selects any paragraph inside a header, main
   or footer element that is being hovered */
:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* The above is equivalent to the following */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

More info here:
:where() Docs