On 27 Sep 2007, at 14:50, JonMarc Wright wrote:
> so i got the idea to play around with attribute selectors for a
> website...
> wanted to serve up transparent png shadowed background images to new
> browsers, and server up non-transparent gifs that i constructed to
> the rest.
>
> here's my code:
>
> #accessBar {background-image: url(../images/shadow.gif); }
> [id="accessBar"] {background-image: url(../images/shadows.png); }
>
> this code won't work, i just get the gifs no matter what browser i
> use.
> i tried using div[id="accessBar"] as well as body[id="accessBar"] and
> neither work.
> the code andy budd lists in his book is
>
> .intro {border-style: solid; }
> [class="intro" {border-style: dotted; }
>
Andy is using class, not ID; this is the heart of the issue. (Note
that although I've snipped it out here, Andy does mention that it's
the order of those two rules that makes the difference.)
It's a question of specificity. As explained in CSS 2.1 section 6.4.3
<http://www.w3.org/TR/CSS21/cascade.html#specificity> the possible
sources of specificity are, highest to lowest:
a. style attributes;
b. ID selectors;
c. other attributes including pseudo-classes;
d. elements and pseudo-elements.
It also mentions explicitly that an attribute selector which happens
to select an ID attribute is not treated as an ID selector.
The end result of all this is that the first rule has a higher
specificity that the second rule, and so overrides it; this doesn't
happen in Andy's example because class selectors don't have the
special importance accorded to ID selectors.
To use the four column approach of the spec (this needs to be viewed
in fixed-width text to make sense):
| a | b | c | d |
-----------------
#fred | 0 | 1 | 0 | 0 | = 100;
[id="fred"] | 0 | 0 | 1 | 0 | = 10;
div#fred | 0 | 1 | 0 | 1 | = 101;
div[id="fred"] | 0 | 0 | 1 | 1 | = 11;
meaning your first rule is at 100 and your second is at 10, so the
higher number wins. This implies that you should get the effect you
want with:
| a | b | c | d |
-----------------
#fred[id="fred"] | 0 | 1 | 1 | 0 | = 110
as 110 is greater than the 100 of #fred.
Phew! Fun stuff, CSS, ain't it? :-D
> am i just a complete fool and i'm doing something obviously wrong?
Not a fool, and not _obviously_ wrong; matters of specificity have
tripped up everybody at some point, I think. (It still gets me on a
regular basis...)
HTH,
Nick.
--
Nick Fitzsimons
http://www.nickfitz.co.uk/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
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/
