For some time now I'm using a little trick that I thought was smart.
That is combining the same css selector to add specificity to the rule's selector.
CSS Specs do mention :
Note: Repeated occurrances of the same simple selector are allowed and do increase specificity.
http://www.w3.org/TR/css3-selectors/#specificity
For example if HTML is
<body>
<section id="main">
<header class="titles">
<h2>Title red</h2>
<h2 class="blue">Title blue</h2>
</header>
<h2 class="blue">Title blue</h2>
</section>
</body>
And CSS
#main .titles h2{
color: red;
}
#main .blue.blue{
color: blue;
}
This way I can use the class .blue to override styles, event in the header...
(I'm doing this because I hate using !important. To me it should be avoided at all costs.)
First selector weighs 0111 (1 id, 1 class, 1 element) Second selector weighs 0120 (1 id, 2 classes)
Sometimes I do it with IDs. And it works... in real browsers... This selector :
#main#main .blue{}
should weigh 0200, as it's got 2 IDs right?
Well IE9 (didn't try others) does not interpret multiple identical IDs in selectors.
This selector won't override #main .titles h2{} in IE9...
IE's css console shows a computed selector equal to #main .blue and removes the second occurence...
Why is that?
To me this is just another IE implementation "bug".
As @BoltClock suggested, I filed a report here :
-
I can confirm, this is weird CSS: #body#body .blue{}Stephan Wagner– Stephan Wagner2014年08月29日 10:00:50 +00:00Commented Aug 29, 2014 at 10:00
-
Do you mean #body #body .blue{} ?o--oOoOoO--o– o--oOoOoO--o2014年08月29日 10:23:59 +00:00Commented Aug 29, 2014 at 10:23
-
I don't think this is intended behaviour, so while it works right now, it might be changed in the future so your webpage will suddenly look different. If you want to override a style just use !important.Michaël van de Weerd– Michaël van de Weerd2014年08月29日 10:28:53 +00:00Commented Aug 29, 2014 at 10:28
-
2@MichaëlvandeWeerd See specs : w3.org/TR/css3-selectors/#specificity it mentions "Repeated occurrances of the same simple selector are allowed and do increase specificity."Armel Larcier– Armel Larcier2014年08月29日 11:10:45 +00:00Commented Aug 29, 2014 at 11:10
-
@ArmelLarcier I stand corrected.Michaël van de Weerd– Michaël van de Weerd2014年08月29日 13:16:58 +00:00Commented Aug 29, 2014 at 13:16
1 Answer 1
Yes, judging by the behavior shown in F12, this is definitely a bug. It's also a violation of the spec, if you interpret "do increase specificity" as "must increase specificity". This issue seems to only affect ID selectors. Class selectors, attribute selectors and pseudo-classes are OK.
This appears to have been reported before as when I search Microsoft Connect, it turns up an existing report, but I can't view it for some reason. The issue is still present in IE11; if you can't view the report either, feel free to file another one.
2 Comments
Explore related questions
See similar questions with these tags.