css - Can I style an element using its grandparent's properties, but then set its parent to be different? -

css - Can I style an element using its grandparent's properties, but then set its parent to be different? -

i'm trying style background colour of element using background colour belonging grandparent, set parent have different colour. possible?

i thought having parent set inherit , element set inherit 'cascade' downwards work, , free alter background colour of parent, hasn't worked.

below stripped-down version of i'm trying accomplish.

class="snippet-code-css lang-css prettyprint-override">div { background-color: #e00; } span.foo { background-color: inherit; } span.bar { background-color: inherit; } span.foo { background-color: #777; } class="snippet-code-html lang-html prettyprint-override"><div> <span class="foo"> hello <span class="bar"> world </span> </span> </div>

you can't want using css, question demonstrates have wrong thought how css works, of import explain why can't want:

css not programming language - not have serial model of operations - this, that, programing languages do.

css description language - allows describe properties of objects without time function. - when "inherit" in css, not mean "copy value , maintain own copy", means "this value parent, , patent, if parent changes" - because not operation, it's description of how things are.

another example, when write like:

p { color: green; } p { color: red; }

it doesn't mean "draw text using greenish color using reddish color" - means "the designer thought wants text green, decided reddish improve - draw text using red".

if want copying value of element , changing source element, you'd need utilize programming language - though think it's best if seek think of way style need using css's descriptive properties.

css