Extraño "descubrimiento" con clases múltiples

metacortex · #1 (**permalink**) 08/04/2008, 21:50

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.

emiliodeg · #2 (**permalink**) 08/04/2008, 22:34

increbiel!!!!!!!!!!!! pero no se hasta q punto esto es un error ya que lo eh probado en FF2, IE6 y 7, O9 y S3 y en todos trabaja de igual manera!!!!!

para quienes vean esto y no vean en un primer momento cual es la super funcionalidad es la siguiente

seguimos en anterior ejemplo de metacortex

tenes una clase para dar estilo a menu y otra para los resultados supngamos

.menu {color:blue}
.resultado {color:green}

y aqui viene la magia, que pasa si queremos hacer que un div q tiene menu y resultado se vea de otro color???? sin tener q modificar nada???????'
.menu.resultado {color:red}

dejo un ejemplo con el q hice las pruebas y pueden ir cambiando las clases para ver como a evolucioanndo

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-ES" lang="es-ES">
<head>
    <title>concatenar clases</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">

        .menu {border:1px solid #0f0}
        .menu.resaltado {font: bold 2em Arial}
        .resaltado.otra-clase {text-transform:uppercase}
        .otra-clase.otra-mas {text-decoration:underline}
        .menu.resaltado.otra-clase.otra-mas {color:#f00}
        
    </style>
</head>
<body>
    <div class="menu resaltado otra-clase otra-mas">tal cosa</div>
</body>
</html>

estaria bueno continuar haciendo pruebas y ver hasta donde se lo puede llevar a esto

y esot no termina aqui, acabo de pasar el CSS validation service de w3c y lo da valido! es una maravilla esot

saludos

Mikmoro · #3 (**permalink**) 09/04/2008, 04:29

Yo lo conocía, de la especificación de CSS2:

Cita:

Para equivaler a un subconjunto de valores "class", cada valor debe ir precedido por un ".", en cualquier orden.

Ejemplo(s):

Por ejemplo, la siguiente regla equivale a cualquier elemento P a cuyo atributo "class" le ha sido asignado una lista de valores separados por espacios que incluyen "pastoral" y "marino":

P.pastoral.marino { color: green }

Esta regla equivale en el caso de class="pastoral rojo azul marino" pero no se corresponde en class="pastoral rojo".

porque me he leído ampliamente el documento y es mi manual de cabecera:

http://www.sidar.org/recur/desdi/tra...r.html#minitoc

Aunque la verdad, nunca había pensado mucho en su utilidad ni la he usado nunca de esa manera.

Buen dato a tener en cuenta, Metacortex.

Mikel.

JavierB · #4 (**permalink**) 09/04/2008, 08:50

Buen descubrimiento meta

Podrías añadirlo a las FAQs, seguro que resulta útil a muchos.

Saludos,

juaniquillo · #5 (**permalink**) 09/04/2008, 14:40

huy.. yo tampoco lo sabía... gracias por el dato...