sass

What does :where(:root) mean in SCSS


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