CSS para elemento con dos clases

[Harris]

Buenos días a todos, estoy maquetando una web y ando un poco atascado.

El código html de la web lo lanza un gestor que no puedo modificar, y que lanza varias clases para cada elemento, por ejemplo:

Código HTML:

<div class="uno dos tres">lorem ipsum</div> 

Quisiera saber como editar a aquellos elementos que tengan las clases uno y dos, o dos y tres, o uno dos y tres, a la vez

Alguien me ayuda???? gracias

[DragonX]

cada clase debes editarla por separado.

uno es una clase
doses otra clase
treses otra clase

por ende no podes editarlas "estilo grupo" ("que tengan las clases uno y dos, o dos y tres, o uno dos y tres, a la vez"), me explico?

[alexk]

Harris igual el "sistema" que uses no creo que lanze las clases al azar, imagino que debe existir algun tipo de patron o logica, si no, si en todos tus elementos se repiten una y otra vez esas 3 unicas clases (que lo dudo mucho) puedes trabajar heredando estilos a lo...
#head div.uno{}
.dos{}
.tres{}
asi cogera primero "uno" aun que si en "dos" y "tres" tienen propiedades que "uno" no tiene, las cogera igual, seria interesante poder ver tu "problema" online para ayudarte mejor en vez de hablar por mera especulacion; suerte!

[Harris]

Buenas a los dos, lo primero gracias en contestar tan rápido.

La página que estoy editando es empresasymercados.es y quiero maquetar de diferente forma una noticia en función de si está en el inicio (y solo aparece la entradilla o resumen) y o está en la noticia desarrollada (con todo el cuerpo).

El código que lanza drupal para la del inicio con entradilla es:

Código HTML:

<div class="node node node-teaser clearfix node-type-story" id="node-7332"> 

donde quiero utilizar node-teaser node-type-story

El código que lanza en la noticia desarrollada es:

Código HTML:

<div class="node node clearfix node-type-story" id="node-7332"> 

donde quiero utilizar node node-type-story.

No sé si me he explicado bien, alguna idea??? muchas gracias.

[alexk]

ehms? jaja... no entiendo otra cosa donde puedes tomar referencia es la id #node-7332 que no debe repetirse
algo asi por ejemplo
#node-7332.node-type-story{}
pero no entiendo bien... que quieres hacer

[Harris]

Buenas alexk,

no puedo utilizar la referencia id, porque esta cambia para cada noticia, por eso es numérica.

En el siguiente ejemplo:

Código HTML:

<div class="entradilla noticia">lorem</div>
<div class="desarrollo noticia">lorem</div>
<div class="entradilla blog">lorem</div>
<div class="desarrollo blog">lorem</div> 

quiero maquetar cada una de los 4 divs de una forma diferente. Puesto que el atributo class (completo) no se repite en ningun div, debería existir una forma de diferenciarlos.

Chao y gracias

[Jokuto]

Yo no se muy bien que quieres hacer todavia, pero yo estoy de acuerdo con alexk, deberias utilizar #node-7332.node-type-story{}, donde 7332 lo cambias por una variable y haces la declaracion de la clase en tiempo de ejecucion con una concatenacion tal que var="#node-"+i+".node-type-story{...}" donde i sea un numerico incremental o como quieras tu, quizas sea una soberana gilipollez porque no se si funcionaria pero bueno jaj

[molinapirata]

.uno[class~="dos"]{color:red;}

[jorgecanto]

Hola Harris, es algo sencillo, basta con utilizar un selector de clase múltiple.

Se hace poniendo las clases que tiene el elemento, sin espacios, por ejemplo:

Código CSS:

.entradilla.noticia {color:red;}
.desarrollo.noticia {color:blue;}
.entradilla.blog {color:green;}
.desarrollo.blog {color:yellow;}
 

[minombreesmm]

Iniciado por jorgecanto

Hola Harris, es algo sencillo, basta con utilizar un selector de clase múltiple.

Se hace poniendo las clases que tiene el elemento, sin espacios, por ejemplo:

Código CSS:

.entradilla.noticia {color:red;}
.desarrollo.noticia {color:blue;}
.entradilla.blog {color:green;}
.desarrollo.blog {color:yellow;}
 

Este post es del 2010 jejes quizas Harris ya resolvió el problema jes..
Buen dato, no sabia que se podian asignar varis clases en css, de haber sabido antes me habria ahorrado tantos problemas.
gracias.

[Rafael]

jorgecanto... OH MY GOD! No puedo creerlo. Bravo.

Siempre es bueno conocer algo nuevo.

minombreesmm. Asignar varias clases a un elemento html es normal de hacer.

Lo que Jorge está poniendo es que sin el espacio prácticamente se elabora un class nuevo con la combinación de ambos. Casi como si hubieras recurrido a JavaScript.

Lo curioso es que eso está desde la especificación 2.1 y nunca la había visto.