html - `#parent span` style is overriding the `.child span` style -

i have case have .menu within #header , when accessed .menu's children via css selector .menu a, using #header a instead.

i expecting .menu a override #header a closer a element. why isn't happening? i'm assuming has being class compared id based on example below.

in example, there way override #red span css within .blue span without otherwise restricting parent style?

by "good way" suppose mean flexible. example .blue element created php framework used in many places (possibly not within id styled parent element, or possibly within parent styled on different id).

here example. except #green still red:

html:

<div id="red">     <span>red</span>     <div class="blue">         <span>blue(class) - should blue</span>     </div>     <div id="green">         <span>green(id) - should green</span>     </div>     <div class="green">         <span>green(class) - should green</span>     </div>     <div>         <span>no child div style - should still red</span>     </div> </div> 

css:

#red span {     color: red; } .blue span {     color: blue; } .green, #green span {     color: green; } 

the priority of applying css rule (without !important) is:

1. number of ids in selector. if draw,
2. number of attributes , classes. if draw,
3. names or pseudo-elements. if draw,
4. last declaration on css file. this, of course, never draws.

since #red span has id, , .green doesn't have any, #red span applies.

for further explanation of css rule apply first, check nice article on smashing magazine

to work around, can use more specific rule. way gets tie on number one, since have classes, rule wins due number two.