html - CSS - Only select the first descendant -

i'm trying style main tags based on theme.

if section's class red, of of it's inner tags should use red style regardless of if section inside section uses yellow style.

so question how restrict inner tags of section/div/nav etc, use style of first descendant encounters.

note: not want rely on order of declare tags.

.red input {    background-color: red;  }    .red article {    background-color: red;  }    .red p {    background-color: red;  }      /*.. other tags.. */    .yellow input {    background-color: yellow;  }    .yellow article {    background-color: yellow;  }    .yellow p {    background-color: yellow;  }      /*.. other tags.. */    .blue input {    background-color: blue;  }    .blue article {    background-color: blue;  }    .blue p {    background-color: blue;  }      /*.. other tags.. */

<section class="yellow">      <section class="blue">      <form>        <input type="button" value="this should use blue theme" />      </form>    </section>      <section class="red">      <article>        <p>this should use red theme</p>        <!-- instead yellow, how fix that? -->      </article>    </section>      <section class="yellow">      <nav>        <p>this should use yellow theme</p>      </nav>    </section>      <p>this should yellow.</p>    </section>

update

okay i've tried given solutions , work given example expand html code more complex doesn't work anymore.

the thing since have build general theme, cannot use css rules depend on order of how html built. user should able build website , regardless of how html built correct styles should applied.

so if user gives container tag (nav, section, div, aside, etc.) class dark-theme, yellow-theme or whatever other theme, of children should use style unless child container has specified own theme.

is not possible? :(

ex:

section class=yellow-theme      p: use yellow-theme      aside: use yellow-theme      div class=red-theme          ul: use red-theme *not yellow          p: use red-theme *not yellow          footer class=blue-theme              a: use blue-theme *not red not yellow              h3: use blue-theme *not red not yellow              div class=yellow-theme                  header: use yellow-theme *not blue * not red                  form: user yellow-theme *not blue *not red                  <!--this go on forever , in order tags--> 

css:

.yellow-theme anytag{     /* style attributes needed: borders, colors, fonts, margins, paddings, etc. */ } /* tags needs styled */  .red-theme anytag{     /* style attributes needed: borders, colors, fonts, margins, paddings, etc. */ } /* tags needs styled */  .blue-theme anytag{     /* style attributes needed: borders, colors, fonts, margins, paddings, etc. */ } /* tags needs styled */ 

any selector-only solution requires make assumptions markup may or may not within control since specificity of 2 contextual selectors same regardless of how close ancestor each descendant matched, , solution makes use of inheriting actual properties requires apply them .red, .yellow , .blue sections, may not desired. example, you'd have apply background-color sections in order background-color: inherit work on descendants, may not want sections have background color, won't option you.

custom properties allow descendants inherit values closest ancestors without polluting other properties in manner, , without other cascading rules getting in way (competing rules equally specific contextual selectors, etc). you'll able reliably custom properties reason.

.red {    --color: red;  }    .yellow {    --color: yellow;  }    .blue {    --color: blue;  }    input, article, p {    background-color: var(--color);  }

<section class="yellow">      <section class="blue">      <form>        <input type="button" value="this should use blue theme" />      </form>    </section>      <section class="red">      <article>        <p>this should use red theme</p>      </article>    </section>      <section class="yellow">      <nav>        <p>this should use yellow theme</p>      </nav>    </section>      <p>this should yellow.</p>    </section>

wiki