No replies
kpatton
Offline
newbie
Last seen: 17 years 36 weeks ago
Joined: 2004-09-13
Posts: 1
Points: 0

anyone know why the following produces blue text in every browser except IE6?

<html>
<head>
<title>IE 6 anomaly?</title>
</head>
<body>
<style type="text/css">
#test.hot {color: red;}
#test.cold {color: blue;}
</style>

<div id="test" class="cold">
cold
</div>

</body>
</html>

from my understanding of selectors, the #test.cold {color:blue;} should be applied, but when you combine a class selector with an id selector within the same style block, anything after the first style declaration for that id combined with a class (doesn't matter what it's called, hot, cold, whatever..) gets ignored!

If you place in different style blocks or in separate css files it works. Seems really weird to me. I have to get round it by doing something like:

<div id="test">
<div class="cold">
</div>
</div>

rather than the simpler and more intuitive..

<div id="test" class="cold">
</div>