Re: [css-d] question about combining descendant selectors
Date: Thu, 08 Jan 2009 16:31:13 -0500
From: Brett xba2...@zoominternet.net
Subject: [css-d] question about combining descendant selectors
To: css-d@lists.css-discuss.org
Message-ID: 496670a1.9060...@zoominternet.net
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
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.
-
These are two separate selectors, separated by a comma
.hm #events_snip .date,
.article { color: red; }
.hm #news_snip .date,
.article { color: green; }
.article{ color: red; }
is overridden by
.article { color: green; }
because it is lower down the cascade. Neither selector includes #news_snip as
it is before the comma.
In your second example, since the article is in fact a descendant of
#events_snip, it takes on the more specific selector .hm #events_snip .article
See here for more information.
http://www.w3.org/TR/CSS21/syndata.html#rule-sets
Mark
--
AstraZeneca UK Limited is a company incorporated in England and Wales with
registered number: 03674842 and a registered office at 15 Stanhope Gate, London
W1K 1LN.
Confidentiality Notice: This message is private and may contain confidential,
proprietary and legally privileged information. If you have received this
message in error, please notify us and remove it from your system and note that
you must not copy, distribute or take any action in reliance on it. Any
unauthorised use or disclosure of the contents of this message is not permitted
and may be unlawful.
Disclaimer: Email messages may be subject to delays, interception, non-delivery
and unauthorised alterations. Therefore, information expressed in this message
is not given or endorsed by AstraZeneca UK Limited unless otherwise notified by
an authorised representative independent of this message. No contractual
relationship is created by this message by any person unless specifically
indicated by agreement in writing other than email.
Monitoring: AstraZeneca UK Limited may monitor email traffic data and content
for the purposes of the prevention and detection of crime, ensuring the
security of our computer systems and checking Compliance with our Code of
Conduct and Policies.
__
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/
[css-d] question about combining descendant selectors
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.
__
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/
Re: [css-d] question about combining descendant selectors
Your selectors are wrong. You aren't using descendent selectors
for .article. You are saying .hm #news_snip .date has the color green
AND ALSO .article has the color green, because of the comma. That
means you have two declarations for .article, and the second one is
over-riding the first.
In your second example, notice the lack of a comma.
.hm #events_snip .date, .article { color: red; }
.hm #news_snip .date, .article { color: green; }
.hm #events_snip .article { color: yellow; }
.hm #news_snip .date, .article { color: green; }
__
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/
Re: [css-d] question about combining descendant selectors
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/
