En este momento estoy adelantando una maquetación y tengo algunas etiquetas con clases múltiples. Pues resulta que desde hace rato me vengo reventando la cabeza con un asunto y la solución la encontré por casualidad
cometiendo un error. Quedé "lelo"
. Miren, en el HTML tengo algo así:
Código HTML:
<div class="menu resaltado">tal cosa</div>
Y por supuesto ambos estilos (
.menu y
.resaltado) están definidos, cada uno con sus propiedades.
Aquí viene la parte que me impresionó. Resulta que a ese
div class="menu resaltado" se le pueden añadir estilos escribiendo esto en el CSS:
Código HTML:
.menu.resaltado { }
... Así de sencillo. Ahora sé que
sin espacios entre estilos, el estilo múltiple lo toma para éste y además no afecta los otros. Increíble. Este "error" me está salvando bastante tiempo y además estoy ahorrando chorros de código, porque se abrevian muchas cosas.
(Ahora bien, por si acaso anoto que no es lo mismo
.menu.resaltado { } que
.menu .resaltado { }. Si se coloca como el último, se entiende que
.resaltado es hijo de
.menu, lo cual no es este caso).
Habría que ver si este truco abarca más de dos clases, por ejemplo:
Código HTML:
<div class="menu resaltado otra-clase otra-mas">tal cosa</div>
Código HTML:
.menu.resaltado.otra-clase.otra-mas { }
Luego hago el experimento a ver si resulta. Al menos yo ignoraba esto.