html - Most efficient way to handle multiple descendant selectors? -

html - Most efficient way to handle multiple descendant selectors? -

i'm creating site has 2 sections; largely static side uses intricate designs coloured backgrounds, , dynamic blog uses white background.

i've specified in _settings.scss (foundation 5) file utilize dark text on white background text elements. working without issue, , applies blog , static side perfectly.

where stumbling finding efficient way manage different coloured backgrounds , appropriate text styles each background on static side.

i have "dark" & "light" section utilize dark , lite bluish background respectively, alternating downwards page.

i have far been using each class name acts wrapper around content. i.e.

<div class="dark section"> <div class="row"> <div class="small-8 columns (etc.)> <h1> header </h1> <p> text </p> </div> </div> </div> <div class="light section"> <div class="row"> <div class="small-8 columns (etc.)> <h1> header </h1> <p> text </p> </div> </div> </div>

that's html. text (p) white both, , have no issues styling (overriding _settings.scss). it's headers giving me issue. struggling find method of targeting headers in each coloured section without spilling next, alternate coloured section; or without adding numerous classes each , every instance of header dependant on background colour.

thus far have been using: (colours simplified 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 mind, should work. however, i'm having styles light class override styles (where different) in dark class. i.e. dark sections have dark-blue headers, rather orange. can't seem stop selector riding 1 'section' through cascade.

i've made stupidly simple oversight, help appreciated.

just utilize descendant selector:

.dark h1 { color: orange; }

here have selected class (.dark), , selected h1 kid at level selected class. apply any <h1> elements within your <div class="dark section"> element, no matter level.

if want utilize descendant selector multiple elements, you'll need add together class each side of comma. selection of .dark h1, h2 selecting h1 elements children of class .dark (as i've explained above), and h2 elements anywhere in body, period... , likewise .light. what need is:

.dark h1, .dark h2 { color: orange; } .light h1, .light h2 { color: dark-blue; }

note original code above, typing colour instead of color. spec uses american english, you'll need prepare these unless have renamed them variables or using pre-processor. note haven't added closing " "small-8" class names.

html css