hello there,

I have a weird example of CSS specificity and I would like to know why it is happening.

alt text

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

1 answer


This is expected behaviour.

While 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

Answered over 6 years ago by John Catterfeld
  • thanks that article is very helpful. Patrick Rauland over 6 years ago