Mon, 2004-09-13 11:39
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>
