I am facing some confusion regarding the CSS and the class attribute. I had always believed that the order in which multiple classes are specified within the attribute value holds significance. It was my understanding that the later class could or should override definitions of the previous class, but this doesn't seem to be working as expected. Here is an example:
<html>
<head>
<style type="text/css">
.extra {
color: #00529B;
border:1px solid #00529B; /* Blue */
background-color: #BDE5F8;
}
.basic {
border: 1px solid #ABABAB;
}
</style>
</head>
<body>
<input type="text" value="basic" class="basic"/>
<input type="text" value="extra" class="extra"/>
<input type="text" value="basic extra" class="basic extra"/>
<input type="text" value="extra basic" class="extra basic"/>
</body>
</html>
In my opinion, the third example with class="basic extra" would ideally have a blue border due to the fact that the border specified in "extra" should override the one from "basic".
This observation was made using FF 3 on ubuntu 9.04