Question

I use the following css:

/* style.css */
#someId {
   background-color: red;
}
#someId.medium {
   width: 300px;
}
#someId.large {
   width: 500px;
}

with the html:

<!-- medium.html -->
<div id="someId" class="medium">hello, world</div>

and

<!-- large.html -->
<div id="someId" class="large">hello, world</div>

I know the above works fine on FireFox and Opera, and, it does not work on IE6 (surprise, surprise).

My questions are:

  Is the above CSS correct according to the CSS-specifications (and where can I find this specific issue)?

  What browsers (on what platform) do & do not support this?

Update:
The IDs are unique per page. I tried to communicate that by having medium.html and large.html but apparently it wasn’t obvious enough.

Update 2:
The code example above was just written to illustrate my question. It is not part of production code and it is not meant to be complete. In short, it is just an example to demonstrate a problem with a very specific solution.

Answer 1

quirksmode have a table of which selector (among other things) browser supports. unfortunaltly, there is not test for combining selector.
but as ie6 fail multiple classes it’s not that surprising.

w3c css specification explains how css selector should works, there is a DIV.warningand E#myid which are not exactly like yours but suggest it should work (maybe it’s explain in the page I didn’t read it all 😉 )