By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,676 Members | 1,139 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,676 IT Pros & Developers. It's quick & easy.

Simple selector question

P: n/a
In reading someone else's stylesheet I ran across the following
two selectors, in the following order.

#footer .label { ... }

[id]#footer .label { ... }
Are these not identical in effect? If not, I'm missing something
about attribute selectors. My reasoning is that in the second selector
[id] is redundant, since anything matching #footer MUST have an id
attribute. (There was no space between the [id] and the #footer).

I looked in the W3C 2.1 spec, and the only thing I could find is that
the second selector has a slightly higher specificity because of the
explicit [id], so it will ALWAYS take precedence over the first rule.

Is this correct?

TIA

Jim Garrison
jhg at acm dot org
Apr 24 '06 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Jim Garrison wrote:

I looked in the W3C 2.1 spec, and the only thing I could find is that
the second selector has a slightly higher specificity because of the
explicit [id], so it will ALWAYS take precedence over the first rule.

Is this correct?

All other things being equal, yes.
The ruleset with the greatest specificity wins.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Apr 24 '06 #2

P: n/a
Jim Garrison wrote:
In reading someone else's stylesheet I ran across the following
two selectors, in the following order.

#footer .label { ... }

[id]#footer .label { ... }


Internet Explorer does not support attribute selectors. This could be being
used as a technique to apply additional styles only to MSIE.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Apr 24 '06 #3

P: n/a
David Dorward wrote:
Jim Garrison wrote:
In reading someone else's stylesheet I ran across the following
two selectors, in the following order.

#footer .label { ... }

[id]#footer .label { ... }


Internet Explorer does not support attribute selectors. This could be being
used as a technique to apply additional styles only to MSIE.


Are you saying that the first selector would be used by MSIE, but the
second one would apply in browsers that support attribute selectors?
Apr 24 '06 #4

P: n/a
On Mon, 24 Apr 2006, Jim Garrison wrote:
David Dorward wrote:
Jim Garrison wrote:
In reading someone else's stylesheet I ran across the following
two selectors, in the following order.

#footer .label { ... }

[id]#footer .label { ... }


Internet Explorer does not support attribute selectors. This could
be being used as a technique to apply additional styles only to
MSIE.


Are you saying that the first selector would be used by MSIE, but the
second one would apply in browsers that support attribute selectors?


*Both* of them would apply in supporting browsers, but in the
case of a clash in values, the second one (having higher priority)
would win.
Apr 24 '06 #5

P: n/a
Alan J. Flavell wrote:
On Mon, 24 Apr 2006, Jim Garrison wrote:
David Dorward wrote:
Jim Garrison wrote:
> In reading someone else's stylesheet I ran across the following
> two selectors, in the following order.
>
> #footer .label { ... }
>
> [id]#footer .label { ... }

Internet Explorer does not support attribute selectors. This could
be being used as a technique to apply additional styles only to
MSIE.


Are you saying that the first selector would be used by MSIE, but the
second one would apply in browsers that support attribute selectors?


*Both* of them would apply in supporting browsers, but in the
case of a clash in values, the second one (having higher priority)
would win.


It's a less-robust method of achieving the same end as conditional
comments, although with the negligible advantage of only needing one
stylesheet.
--
AGw.

Apr 24 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.