Puoi indirizzare un elemento con CSS solo se sono presenti 2 classi?

Come probabilmente già saprai, potresti avere più classi su elementi separati da uno spazio.

Esempio

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

E con CSS puoi indirizzarlo divcon .contento .main. C'è un modo per indirizzarlo se e solo se entrambe le classi sono presenti?

Esempio

<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>

Quale selettore CSS dovrei usare per ottenere divsolo il primo (presumo che non possa usare .content:first-childo simili)?

Sì, basta concatenare: .content.main. Vedi selettore di classe CSS .

Ma si noti che Internet Explorer fino alla versione 6 non supporta più selettori di classe e si limita a rispettare l'ultimo nome di classe.

Solo per il gusto di farlo (io in realtà non consiglio di fare questo), non v'è un altro modo per farlo:

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

O:

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

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

E [foo ~ = "warning"] Corrisponde a qualsiasi elemento E il cui valore dell'attributo "foo" è un elenco di valori separati da spazi , uno dei quali è esattamente uguale a "warning"

Demo: http://jsfiddle.net/eXrSg/

Perché questo è effettivamente utile (almeno per IE6):

Poiché IE6 non supporta più classi, non possiamo usarle .content.main, ma ci sono alcune librerie javascript come IE-7.js che abilitano il selettore di attributi, ma sembrano comunque fallire quando si tratta di più classi. Ho testato questa soluzione alternativa in IE6 con javascript che abilita il selettore di attributi, ed è brutta, ma funziona.

Devo ancora trovare uno script che renda IE6 supportare più selettori di classe, ma ne ho trovati molti che abilitano i selettori di attributi. Se qualcuno ne conosce uno che funziona , per favore fammi un messaggio nei commenti così posso liberarmi di questa soluzione alternativa.