CSS: Dobles clases
Ayer surgió una pequeña duda en curso sobre estándares web. Cómo se comportan los navegadores con etiquetas que tienen más de una clase.
Pues bien, si las clases están definidas en la CSS individualmente gana en todos los navegadores la última de la CSS o la que más peso tenga (como toda la vida). Sin embargo si usamos en la CSS definiciones dobles la cosa cambia. Como me explico muy mal, he creado el siguiente ejemplo:
<html>
<head>
<style>
.rojo.verde {background-color:red} /*doble clase con más peso que una clase simple*/
.verde {background-color:green} /*clase simple*/
</style>
</head>
<body>
<div class="rojo verde">
HOLA
</div>
</body>
</html>
Pues bien Firefox e IE7 el div tendrá fondo de color rojo (pesa más) mientras que IE6 lo pinta verde (en este caso) y lo pinta rojo en el caso de que la clase .verde estuviera por encima de la clase .rojo.verde, es decir IE6 no es capaz de interpretar una doble clase y sigue aplicando la última definida o la que más peso tenga para él. Así que ¡¡cuidado!!
.