How do i set up global css rules on nested classes?

How To
1

Suppose, I have a dark and light section, with classes .dark & .light, i want all text (p tags)inside .dark, to be white and vice versa…
So, where do i write the rule like
.dark p{color: white;}
.light p{color: black;}
Please help

2

create and apply the class .dark, select it, and in the custom css area write %root% p {color: white;} etc

3

That’s very much doable, but it seems difficult to manage if we are doing things on scale, think like we are going more in depth say, .dark .accordion .header h2{}

Do you know a better way i can handle it?

4

on .dark just add:

%root% p, %root% h2 {color: white;}

That’ll apply to all p or h2 with the class dark, regardless of what other classes are on it. So if you wanted .dark to render all text with it white:

%root% p, %root% h2, %root% h3, %root% h4, %root% h5, %root% h6, %root% a, %root% span {color: white;}

should pretty much cover all your bases and leave them all manageable form .dark

If you wanted the accordion h2 to be yellow instead, then, on .accordion, you’d add (assuming dark is the earliest class, swap if not):

.dark%root% h2 {color: yellow;}

5

I get it, so there’s no one stylesheet that will house my entire design library(the css rules etc.), but will be there in place individually, correct?
Thanks !