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


360

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

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

Je veux appliquer ma règle de style uniquement si les lideux .leftet les .ui-class-selectorclasses sont appliquées.


Réponses:


595

Tu veux dire deux classes? "Enchaînez" les sélecteurs (aucun espace entre eux):

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

Cela sélectionne tous les éléments class1qui ont également class2.

Dans ton cas:

li.left.ui-class-selector {

}

Documentation officielle: sélecteurs de classe CSS2 .


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


6
Veuillez noter qu'IE6 ne les aime pas, car il ne lit pas la chaîne de classes. Il ne regardera que la dernière classe de la chaîne.
akamike

16
ce n'est pas le cas :) Tous les principaux sites Web ont baissé, sont en train de tomber ou envisagent de supprimer dans un avenir proche la prise en charge d'IE6 .. Faites de même!
Thomas Bonini

@Andreas Bonini: Oui, je sais. Pour être honnête, je ne me soucie pas d'IE6 depuis longtemps. (J'ai supprimé mon commentaire précédent car j'ai trouvé l'autre question qui traite de ce problème.)
Felix Kling

Oui, vous ne pouvez pas du tout les utiliser dans IE6, ne prenez que des itinéraires plus longs pour styliser vos éléments. Par exemple, styliser chaque classe séparément et utiliser la spécificité CSS appropriée pour remplacer le mieux possible.
akamike

2
Je me souviens avec émotion d'avoir dansé sur la tombe d'IE6. Je n'ai même pas eu à prendre en charge IE10 cette année, et la suppression totale d'IE est à l'horizon. J'adore l'avenir. ☺
Michael Scheper

22

Les sélecteurs de chaîne ne sont pas limités uniquement 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 le supportent sauf IE 6, il sélectionne en fonction 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*/
}

9
Id & Id est un sélecteur conceptuellement étrange.
Félix Gagnon-Grenier

0

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 <li>possédant 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";
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.