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 :