web-dev-qa-db-fra.com

Sélectionner un élément basé sur plusieurs classes

J'ai une règle de style que je veux appliquer à une balise quand elle a deux styles. Est-il possible d'effectuer cela sans JavaScript? En d'autres termes:

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

Je souhaite appliquer ma règle de style uniquement si la classe li a les classes .left et .ui-class-selector appliquées.

csscss-selectors
308
Ciel

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

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

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

Dans ton cas:

li.left.ui-class-selector {

}

Documentation officielle: Sélecteurs de classe CSS2 .

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

529
Felix Kling

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

Des classes 

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

Identifiant de classe 

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

J'ai fait 

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

Tous les bons navigateurs actuels prennent en charge cette option, à l'exception de IE 6, la sélection est basée sur le dernier sélecteur de la liste. Ainsi, ".classA.classB" sélectionnera uniquement en fonction de ".classB".

Pour votre cas

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

ou

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

Vous pouvez utiliser ces solutions: 

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

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

Les règles CSS s'appliquent à toutes les balises ayant <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";
0
bahman parsamanesh