W3C home > Mailing lists > Public > www-style@w3.org > September 2004

Combining class and id selectors - IE6 anomaly?

From: Keith Patton <kpatton@sandfield.co.nz>
Date: Tue, 14 Sep 2004 14:37:56 +1200
Message-ID: <86CAFDD12D970C4D9364DC85C1F4830606DC72@salexc1.sandfield.co.nz>
To: <www-style@w3.org>

Hi there, 

I am attempting to structure a css file using ID selectors for the page
architecture and then use class selectors to vary the style of these
areas on a contextual basis. 

The following works in every browser except IE 6 it seems (including IE5
and IE 5.5):

<style type="text/css">
	#content.aboutUs {color: blue;}
	#content.products {color: red;}
</style>

<div id="content" class="products">
Test Text
</div>

For some reason if you declare a combined id and class selector *within
the same style block or stylesheet* ie 6 will only listen to the one
that is declared first. Even if this selector is not present within the
html document!

Does anyone know why this is?

I have alternatives of couse, but this one is more mark up and is
uglier:

<div id="content">
	<div class="products">
	Test Text
	</div>
</div>

.... Or just using class selectors

<div class="content products">
	Test Text
</div>

The last one might have worked except div.content.products in IE applies
automatically to *anything* with products as class attribute, for
example:

<div class="products">test</div>

Div.somethingimadeup.products {color: red;}

Looking forward to your thoughts, 

Keith
Received on Tuesday, 14 September 2004 02:38:31 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:32 GMT