Règle CSS à appliquer uniquement si l'élément a deux classes

Question

Disons que nous avons ce balisage:

<div class="abc"> ... </div>
<div class="xyz"> ... </div>
<div class="abc xyz" style="width: 100px"> ... </div>

Existe-t-il un moyen de sélectionner uniquement le <div> dont les classes BOTH abc et xyz (la dernière) ET remplacent sa largeur en ligne pour que la largeur effective soit 200px?

Quelque chose comme ça:

[selector] {
  width: 200px !important;
}

Answer 1

div.abc.xyz {
    /* rules go here */
}

... ou simplement:

.abc.xyz {
    /* rules go here */
}

Answer 2

Ci-dessous s'applique à toutes les balises avec les deux classes suivantes

.abc.xyz {  
  width: 200px !important;
}

s'applique aux balises div avec les deux classes suivantes

div.abc.xyz {  
  width: 200px !important;
}

Si vous voulez modifier cela en utilisant jQuery

$(document).ready(function() {
  $("div.abc.xyz").width("200px");
});

Answer 3

Si vous avez besoin d’une solution progmatique, cela devrait fonctionner dans jQuery:

$(".abc.xyz").css("width", 200);