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
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