Change specificity by child

Question

hi

I'd like to integrate a theme tag to my elements so they appear in diffrent colours. But since the css selectors have the same css specificity the latest overrides the earlier defined rule.

this is an example that shows my problem:

....
<div class="red">
  <div class="box">This should be red</div>
  <div class="yellow">
    ...
        <div class="box">This should be yellow (nested in x levels under the div.yellow)</div>
    ...
</div>
....

and here my css

.box { width: 100px; height: 100px; }
.yellow { background-color: yellow; }
.red { background-color: red; }

the box should be listed somewhere, but as soon as it is a sub child of another color definition it should been overwritten.

thanks for any help!

//jim

Answer 1

You probably need to use CSS's !important keyword eg:

.yellow { background-color: yellow !important;}

Answer 2

You shouldn't really be doing things this way -- if your theme changes, then suddenly things with class yellow may actually be blue, for example. I would suggest finding a common way of naming things (even if it's just colour1, colour2, colour-highlight...) and then specifying those styles. You can then look into the way your pages are designed and make the rules more specific as necessary (either by using !important or by making the rule more specific, e.g. .colour1 becoming .box .colour1 or div.colour1).

Answer 3

Try:

.box { background-color: inherit;  }

See: http://jsbin.com/imube/edit

Answer 4

I don’t quite see the problem. Here’s what I get with that code: