How to conditionally apply styling in css

Question

How to apply same style with having two different parent classes that appears unique on each page body in magento2. Like i needed this in scss file which have deep nested structure but only its top parent alter for each page. for example i want this

    class1 or class 2{
         class3{
             class5{

              }
         }
         class4{
         }
    }
enter code here

I want to if its either class1 or class2 comes in html this styling should be apply. Thanks

Answer 1

define your root classes comma-separated

.class1, .class2 {
   /* other selectors here */
}

so SASS will compile this code into

.class1 {
   /* other selectors here */
}

.class2 {
   /* other selectors here */
}

Anyway it's worth to remark that using multiple classes as ancestors of a scope will create redundant CSS code in output and it could be useful try to find a single selector (if possible, eg maybe magento allows to put a specific class only for both the pages?)

Answer 2

you can do something like this

.class1, .class2 {

         .class3 {
               /*your style */
              .class5 {
                  /*your style */
              }
         }

         class4 {
            /*your style */
         }
    }

only thire parent class .class1 or .class2 only then style apply to class3, class5, and class4