how to use :has in sass

Issue

I need to add some styles if body has some element with .rtl class. How is possible to do it ?

body:has(.app.rtl) {
   .blah {
       some: blah;
   }
}

This is something that I need

Solution

What you want cannot be done using CSS since CSS has no parent selector and currently also no :has selector.

SASS cannot help you either since all SASS can do for you is make authoring CSS easier - in the end any pre-processor will compile your code to CSS which is the only thing the browser understands. The only cross-browser solution here (still) is Javascript.

Edit Summer 2022: As of now, Safari supports :has(), and Chrome has support behind an experimental web platform features flag. Firefox is working on it.

Your style is going to look like this:

body:has(.app.rtl) .blah {
    some: blah;
}

Answered By - connexo