¿Puede apuntar a un elemento con CSS solo si hay 2 clases presentes?

85

Como probablemente ya sepa, puede tener varias clases de elementos separados por un espacio.

Ejemplo

<div class="content main"></div>

Y con CSS puedes apuntar a eso divcon .contento .main. ¿Hay alguna forma de apuntar a él si y solo si ambas clases están presentes?

Ejemplo

<div class="content main">I want this div</div>
<div class="content">I don't care about this one</div>
<div class="main">I don't want this</div>

¿Qué selector de CSS usaría para obtener divsolo el primero (supongo que no puedo usar .content:first-childo algo similar)?

css css-selectors alex
fuente

Respuestas:

135

Sí, sólo les concatenar: .content.main. Consulte el selector de clases de CSS .

Pero tenga en cuenta que Internet Explorer hasta la versión 6 no admite varios selectores de clase y solo respeta el último nombre de clase.

Gumbo
fuente
Siempre y cuando sea 'hasta' y no 'incluido' IE6 :)
alex
No, IE6 no comprende correctamente los selectores CSS encadenados. Esa regla se aplicará a todos los elementos con class = "main" independientemente de si también son class = "content"
Gareth
Una ilustración para IE6 frente a otros navegadores para cualquier persona que se preocupe: stackoverflow.com/questions/3772290/…
BoltClock
11

Sólo por el bien de ella (que realmente no recomiendo hacer esto), no es otra manera de hacerlo:

.content[class~="main"] {}

O:

.main[class~="content"] {}

Referencia: http://www.w3.org/TR/CSS2/selector.html

E [foo ~ = "warning"] Coincide con cualquier elemento E cuyo valor de atributo "foo" sea una lista de valores separados por espacios , uno de los cuales es exactamente igual a "warning"

Demostración: http://jsfiddle.net/eXrSg/

Por qué esto es realmente útil (al menos para IE6):

Dado que IE6 no admite múltiples clases, no podemos usar .content.main, pero hay algunas bibliotecas de javascript como IE-7.js que habilitan el selector de atributos, pero aún parecen fallar cuando se trata de múltiples clases. He probado esta solución en IE6 con javascript que habilita el selector de atributos, y es feo, pero funciona.

Todavía tengo que encontrar un script que haga que IE6 admita múltiples selectores de clases, pero he encontrado muchos que habilitan los selectores de atributos. Si alguien sabe de uno que funciona , por favor dígame un mensaje en los comentarios para que pueda deshacerme de esta solución.

Wesley Murch
fuente