Most efficient way to handle multiple descendant selectors? - html

Question

I'm creating a site that has two sections; a largely static side that uses intricate designs with coloured backgrounds, and a dynamic blog that simply uses a white background.
I've specified in my _settings.scss (Foundation 5) file to use a dark text on white background for all text elements. This is working without issue, and applies to the blog and static side perfectly.
Where I am stumbling is finding an efficient way to manage the different coloured backgrounds and appropriate text styles for each background on the static side.
I have a "dark" & "light" section that use a dark and light blue background respectively, alternating down the page.
I have thus far been using each as a class name that acts as a wrapper around my content. i.e.
<div class="dark section">
<div class="row">
<div class="small-8 columns (etc.)>
<h1> Some Header </h1>
<p> Some text </p>
</div>
</div>
</div>
<div class="light section">
<div class="row">
<div class="small-8 columns (etc.)>
<h1> Some Header </h1>
<p> Some text </p>
</div>
</div>
</div>
That's my HTML. The text (p) is white for both, and I have no issues styling that (overriding _settings.scss). It's the headers that are giving me issue. I am struggling to find a method of targeting the headers in each coloured section without it spilling to the next, alternate coloured section; or without adding numerous classes to each and every instance of the header dependant on background colour.
Thus far I have been using: (colours simplified as I'm using SCSS variables)
.dark {
background-color: dark-blue;
colour: white;
}
.dark h1,h2 {
colour: orange;
}
.light {
background-color: light-blue;
colour: white;
}
.light h1,h2 {
colour: dark-blue;
}
.section {
*insert various padding here*
}
Now this to my mind, should work. However, I'm having the styles from the light class override the styles (where different) in the dark class. i.e. The dark sections have dark-blue headers, rather than orange. I can't seem to stop the selector from riding from one 'section' to another through the cascade.
I've probably made a stupidly simple oversight, but any help would be greatly appreciated.

Answer 1

Just use the descendant selector:
.dark h1 {
color: orange;
}
Here we have selected a class (.dark), and then selected an h1 that is a child at any level to the selected class. So this will apply to any <h1> elements within your <div class="dark section"> element, no matter what level.
If you want to use this descendant selector with multiple elements, you'll need to add the class to each side of the comma. Currently your selection of .dark h1, h2 is selecting all h1 elements that are children of class .dark (as I've explained above), and all h2 elements anywhere in your body, period... and likewise for .light. What you need is:
.dark h1, .dark h2 {
color: orange;
}
.light h1, .light h2 {
color: dark-blue;
}
Note that with your original code above, you are typing colour instead of color. The spec uses American English, so you'll need to fix these unless you have renamed them as variables or something using your pre-processor. Also note that you haven't added a closing " to your "small-8" class names.