I have a weird example of CSS specificity and I would like to know why it is happening.
I thought id selectors were more specific than class selectors. So why are the styles in .content overwriting the styles in the #block-views... div?
And then how come the ID selector is overwriting the tag+class selector (div.block). I'm confused. I thought I had a good handle on CSS. Perhaps this is just a Monday thing.
FYI the document is structured like so:
[ div id=block-views... ]
[ div class="content" ] test content [ /div ]
[ /div ] 93
This is expected behaviour.
color is a cascading property, specifically defining the colour of the
.content div, which is inside the
#block-views div will override the cascade.
The "Know when To Fold 'Em" section at the bottom of this article explains the concept quite well: http://iamacamera.org/default.aspx?id=95