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

Como probablemente ya sepa, puede tener múltiples clases en elementos separados por un espacio.

Ejemplo

Y con CSS, puede orientar ese div con .content o .main . ¿Hay alguna manera de apuntarlo si y solo si ambas clases están presentes?

Ejemplo

 
I want this div
I don't care about this one
I don't want this

¿Qué selector de CSS usaría para obtener solo el primer div (suponiendo que no puedo usar .content:first-child o similar)?

Sí, solo concatenarlos: .content.main . Ver selector de clase CSS .

Pero tenga en cuenta que Internet Explorer hasta la versión 6 no es compatible con múltiples selectores de clases y solo respeta el nombre de la última clase.

Solo por el bien (no te recomiendo que hagas esto), hay otra forma de hacerlo:

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

O:

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

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

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

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

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

Como IE6 no es compatible con múltiples clases, no podemos usar .content.main , pero hay algunas librerías javascript como IE-7.js que activan el selector de atributos, pero parecen fallar cuando se trata de múltiples clases. He probado esta solución en IE6 con javascript habilitando el selector de atributos, y es feo, pero funciona.

Aún no he encontrado una secuencia de comandos que haga que IE6 admita múltiples selectores de clases, pero que haya encontrado muchos que habiliten selectores de atributos. Si alguien sabe de uno que funciona , por favor dame un grito en los comentarios para que pueda deshacerme de esta solución.