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/