Foros del Web » Creando para Internet » CSS »

Extraño "descubrimiento" con clases múltiples

Estas en el tema de Extraño "descubrimiento" con clases múltiples en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/04/2008, 22:50
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.021
Antigüedad: 13 años, 6 meses
Puntos: 832
Extraño "descubrimiento" con clases múltiples

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.
  #2 (permalink)  
Antiguo 08/04/2008, 23:34
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Re: Extraño "descubrimiento" con clases múltiples

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 {fontbold 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
__________________
Degiovanni Emilio
developtus.com

Última edición por emiliodeg; 08/04/2008 a las 23:40 Razón: agrege w3c
  #3 (permalink)  
Antiguo 09/04/2008, 05:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Extraño "descubrimiento" con clases múltiples

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.
  #4 (permalink)  
Antiguo 09/04/2008, 09:50
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
Re: Extraño "descubrimiento" con clases múltiples

Buen descubrimiento meta

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

Saludos,
  #5 (permalink)  
Antiguo 09/04/2008, 15:40
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: Extraño "descubrimiento" con clases múltiples

huy.. yo tampoco lo sabía... gracias por el dato...
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 4 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 23:01.