Pouvez-vous cibler un élément avec CSS uniquement si 2 classes sont présentes?

Question

Comme vous le savez probablement déjà, vous pouvez avoir plusieurs classes sur des éléments séparés par un espace.

Exemple

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

Et avec CSS, vous pouvez cibler qu' div soit avec .content ou .main. Est-il un moyen de cible si et seulement si les deux classes sont présentes?

Exemple

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

Ce sélecteur CSS aurais-je utiliser pour obtenir le premier div seulement (à supposer que je ne peux pas utiliser .content:first-child ou similaire)?

Answer 1

Oui, il suffit de les concaténer: .content.main . Voir le sélecteur de classe CSS .

Toutefois, notez que jusqu’à la version 6, Internet Explorer ne prend pas en charge les sélecteurs de classes multiples et ne tient compte que du dernier nom de classe.

Answer 2

Juste pour le plaisir de celui-ci (je n'ai pas vraiment recommandé de le faire), il est une autre façon de faire:

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

Ou:

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

Référence: http://www.w3.org/TR/CSS2/selector.html

E[foo~="warning"] Correspond à n'importe quel E élément dont l'attribut "foo" la valeur est une liste de l'espace de valeurs séparées, dont l'une est exactement égale à "avertissement"

Démo: http://jsfiddle.net/eXrSg/

Pourquoi est-ce réellement utile (pour IE6 au moins):

Depuis IE6 ne supporte pas plusieurs classes, nous ne pouvons pas utiliser .content.main, mais il y a certaines bibliothèques javascript comme IE-7.js activer le sélecteur d'attribut, mais semblent toujours à l'échec quand il s'agit de plusieurs classes. J'ai testé cette solution de contournement dans IE6 javascript permettant le sélecteur d'attributs, et qu'il est laid, mais il fonctionne.

Je n'ai pas encore trouvé un script qui fait IE6 en charge plusieurs sélecteurs de classe, mais ont trouvé de nombreux qui permettent sélecteur d'attribut. Si quelqu'un en connaît un qui fonctionne, merci de me donner un cri dans les commentaires afin que je puisse être débarrasser de cette solution de contournement.