Sélectionner un élément en fonction de plusieurs classes

Question

J'ai une règle de style que je veux appliquer à une balise quand elle a deux classes. Existe-t-il un moyen d'effectuer cette opération sans JavaScript ? En d'autres termes :

<li class="left ui-class-selector">

Je veux appliquer ma règle de style uniquement si le li a à la fois .left et .ui-class-selector classes appliquées.

Answer 1

Vous voulez dire deux classes ? "Enchaînez" les sélecteurs (sans espace entre eux) :

.class1.class2 {
    /* style here */
}

Cela sélectionne tous les éléments avec class1 qui ont aussi class2 .

Dans votre cas :

li.left.ui-class-selector {

}

Documentation officielle : Sélecteurs de classe CSS2 .

---

Comme akamike signale un problème avec cette méthode dans Internet Explorer 6, vous devriez peut-être lire ceci : Utiliser des classes doubles dans les CSS d'IE6 ?

Answer 2

Les sélecteurs de chaîne ne sont pas limités aux classes, vous pouvez le faire pour les classes et les identifiants.

Classes

.classA.classB {
/*style here*/
}

Classe & Id

.classA#idB {
/*style here*/
}

Id & Id

#idA#idB {
/*style here*/
}

Tous les bons navigateurs actuels supportent cela, sauf IE 6, qui sélectionne sur la base du dernier sélecteur de la liste. Ainsi, ".classA.classB" sera sélectionné sur la base de ".classB".

Pour votre cas

li.left.ui-class-selector {
/*style here*/
}

ou

.left.ui-class-selector {
/*style here*/
}

Answer 3

Vous pouvez utiliser ces solutions :

Les règles CSS s'appliquent à toutes les balises qui ont les deux classes suivantes :

.left.ui-class-selector {
    /*style here*/
}

Les règles CSS s'appliquent à toutes les balises qui ont <li> avec les deux classes suivantes :

li.left.ui-class-selector {
   /*style here*/
}

Solution jQuery :

$("li.left.ui-class-selector").css("color", "red");

Solution Javascript :

document.querySelector("li.left.ui-class-selector").style.color = "red";