web-dev-qa-db-fra.com

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

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 ce div avec .content ou .main. Existe-t-il un moyen de le cibler 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>

Quel sélecteur CSS devrais-je utiliser pour obtenir le premier div uniquement (supposons que je ne peux pas utiliser .content:first-child ou similaire)?

csscss-selectors
79
alex

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

Mais notez qu'Internet Explorer jusqu'à la version 6 ne prend pas en charge plusieurs sélecteurs de classe et ne fait qu'honorer le dernier nom de classe.

124
Gumbo

Juste pour le plaisir (je ne vous recommande pas vraiment de faire ça), il y a c'est une autre façon de le faire:

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

Ou:

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

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

E [foo ~ = "warning"] Correspond à tout élément E dont la valeur d'attribut "foo" est une liste de valeurs séparées par des espaces , dont l'une est exactement égal à "avertissement"

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

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

Comme IE6 ne prend pas en charge plusieurs classes, nous ne pouvons pas utiliser .content.main, mais il existe des bibliothèques javascript comme IE-7.js qui activent le sélecteur d'attributs, mais semblent toujours échouer quand il s'agit de plusieurs classes. J'ai testé cette solution de contournement dans IE6 avec javascript activant le sélecteur d'attributs, et c'est moche, mais cela fonctionne.

Je n'ai pas encore trouvé de script permettant à IE6 de prendre en charge plusieurs sélecteurs de classe, mais j'en ai trouvé beaucoup qui activent les sélecteurs d'attributs. Si quelqu'un en connaît un qui fonctionne, merci de me donner un cri dans les commentaires pour que je puisse me débarrasser de cette solution.

12
Wesley Murch