Question

I am not new to CSS, I’m just not that adept with it. I ran into an ‘issue’ today in having a sub-element being overwritten by the parent’s css. After some head scratching I realized all I needed to do was add an ‘! important’ to the css (which to show you my ability is brand new to me)

(I have placed a working example @ that illustrates my question in living color)
http://jsfiddle.net/4RYM3/1/

#byIdName div{  /* #1 */
       margin: 30px;
    background:#FF00FF;
}
div#ByIdNameTwo{  /* #2 */
           margin: 30px;
     background:#00FF00;
}
div.idone{
    margin: 20px;
    background:#FFFF00;
}
div.idtwo{
    margin: 0px;
    background:#cccccc;
}
div.idone2{
    margin: 20px ! important;
    background:#FFFF00 ! important;
}
div.idtwo2{
    margin: 0px ! important;
    background:#cccccc ! important;
}

http://www.w3.org/TR/CSS2/cascade.html#specificity

Now looking at this, I cannot understand why #1 and #2 seem to behave differently (please look at the jsfiddle link above).
While I am happy that I got this to work (with the ! Important) I am lost as to the why #1 and #2 are behaving in the manner that they are.

Can anyone shed some light on this behavior?

Is one the preferred method and the other looked down upon, and if so why (this is my main question)?

thanks in advance

Answer 1

These behave differently because #byIdName div refers to any children of type div with parent #byIdName

This div#ByIdNameTwo refers to any div with ID #byIdNameTwo

for Direct children use #byIdName>div

for any children including grand-children great-grand-children….etc. use

#byIdName div