ID+Class selector bug in IE6

[GoogleCodeExporter]

If you try this with IE6 :
#my_id{background:red;}
#my_id.my_class{background:green;}
#my_id.my_other_class{background:blue;}

IE6 will apply a red background to these elements :
<div id="my_id" class="my_class"></div>
<div id="my_id" class="my_other_class"></div>

The element will keep the first style defined without the combination of an
ID and a class.


But you can do this :
#my_id{background:red;}
#my_id.my_class{background:green;}

<div id="my_id" class="my_class"></div>

Because there is only one combination of id+class, it works.


Finally, this works :
#my_id div{background:red;}
#my_id.my_class div{background:green;}
#my_id.my_other_class div{background:blue;}

Because the selected element is not directly the ID+Class element, but an
element inside.

Original issue reported on code.google.com by pierre6...@gmail.com on 7 Feb 2008 at 4:31

[GoogleCodeExporter]

Original comment by dean.edw...@gmail.com on 21 Feb 2008 at 9:55

• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

Is this a true issue? According to W3C the id must be unique in the document, 
i.e.
two elements in the same document can't have the same id attribute.
(http://www.w3.org/TR/html401/struct/global.html#h-7.5.2)
/C#

Original comment by svar...@gmail.com on 26 Mar 2008 at 6:46

[GoogleCodeExporter]

Of course, but it's only a CSS problem.

On a website, you can have a page which contains this :
<div id="my_id" class="my_class"></div>

And another which contains this :
<div id="my_id" class="my_other_class"></div>

In your CSS file, shared with all your pages, if you write this :
#my_id{background:red;}
#my_id.my_class{background:green;}
#my_id.my_other_class{background:blue;}

The background will be red for the two pages with IE6, because you used twice 
and
directly the schema " #ID.CLASS ".

It's a little hard to explain with my poor english, sorry :)

Original comment by pierre6...@gmail.com on 26 Mar 2008 at 7:25

[GoogleCodeExporter]

Ah. My bad. Didn't think of that.
However, shouldn't this be a defect rather than an enhancement?

Original comment by svar...@gmail.com on 26 Mar 2008 at 8:03

[GoogleCodeExporter]

Changed back to "Defect".

Original comment by dean.edw...@gmail.com on 26 Mar 2008 at 8:11

• Added labels: Type-Defect
• Removed labels: Type-Enhancement

[GoogleCodeExporter]

Original comment by dean.edw...@gmail.com on 14 Feb 2010 at 3:08

• Changed state: Accepted
• Added labels: Priority-Low
• Removed labels: Priority-Medium

[GoogleCodeExporter]

I see this bug with both of the following rules, actually:

#unique.someClass and .firstClass.secondClass

The double-class selector is where I first saw it.

Original comment by geo...@gmail.com on 25 May 2011 at 8:58