Change specificity by child

Posted by jim red on Stack Overflow See other posts from Stack Overflow or by jim red
Published on 2009-12-15T07:53:13Z Indexed on 2010/03/29 22:03 UTC
Read the original article Hit count: 421

Filed under:
|
|

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

© Stack Overflow or respective owner

Related posts about html

Related posts about css