Brett wrote:
> I'm wondering if combined selectors have a lower specificity than
> non-combined. For example in my stylesheet I have:
>
> .hm #events_snip .date, .article { color: red; }
> .hm #news_snip .date, .article { color: green; }
>
> On the page the .article class shows up green, even though it is NOT
> descendant from #new_snip, it is descendant from #events_snip. Why does
> it do that?
>
> Now, if I have this:
>
> .hm #events_snip .article { color: yellow; }
> .hm #news_snip .date, .article { color: green; }
>
> The .article class shows as yellow. I don't understand this.
Hi Brett,
Specificity applies to each selector individually. Commas are used to
separate, not concatenate separators.
I believe you're expecting your selectors to behave like this:
.hm #event_snip (.date,.article) { color : green }
.hm #news_snip (.date,.article) { color : green }
...but selectors don't work like this in CSS.
The specificity of your selectors is applied in this manner:
!important (1-Author,2-User)
ID (1 for each ID in the selector)
Class, psuedo-class, attribute (1 for each specified)
Element (1 for each)
So, using your selectors, we get these scores:
.hm #events_snip .article { color: red; }
= 0,1,2,0
.article { color: red; }
= 0,0,1,0
.hm #news_snip .date { color: green; }
= 0,1,2,0
.article { color: green; }
= 0,0,1,0
.hm #events_snip .article { color: yellow; }
= 0,1,2,0
.hm #news_snip .date { color: green; }
= 0,1,2,0
.article { color: green; }
= 0,0,1,0
I've used commas because specificity is not base10, meaning 10 elements
does not equal 1 class, and 10 classes does not equal 1 ID and so on. We
can remove the commas for your example, and we can see that 120 is
greater than 10 and you set the .article to have a color of green
/after/ you set it to red. Since it's the same selector, red applies or
yellow in example two because your first rule has a greater specificity.
You can fix this by expanding your selectors like so:
.hm #events_snip .date,
.hm #events_snip .article { color: red; }
.hm #news_snip .date,
.hm #news_snip .article { color: green; }
...which will give you the specificity you want on the right selectors.
Hope that helps. I couldn't think of a good ASCII drawing for
specificity. ;-)
Best,
Bill
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
