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/

Reply via email to