Css: Style appliqué à une combinaison de classes?
Je ne suis pas sûr que ce soit possible, mais existe-t-il une syntaxe à utiliser en CSS lorsque vous voulez styliser un élément en fonction de la combinaison de classes qui lui sont appliquées?
Je comprends que je peux vérifier un élément avec jQuery ou quelque chose et changer son style en fonction des classes qu'il a, mais existe-t-il un moyen CSS pur de le faire?
Par exemple, si j'ai une classe pour gras et vert:
.bold_green { color:green; font-weight:bold; }
Et une classe pour gras et Bleu:
.bold_blue { color:blue; font-weight:bold. }
Maintenant, disons que j'utilise jQuery pour ajouter et supprimez les classes dynamiquement et voulez que tout élément qui a les deux classes devienne rose italique.
Quelque Chose comme:
.bold_green AND .bold_blue { color:pink; font-style:italic; }
Ou, si je veux styliser un élément qui a une classe, et est un descendant d'un autre élément qui a une autre classe?
Quelque Chose comme:
.bold_green HAS_CHILD .bold_blue { color:black; background-color:yellow; }
Merci!
Modifier
Merci pour toutes les réponses. Ce sont à peu près ce que je pensais (en traitant simplement les classes comme des sélecteurs réguliers), mais ils ne semblent pas fonctionner m'. Je vais devoir vérifier mon code et m'assurer qu'ils ne sont pas remplacés d'une manière ou d'une autre...
4 réponses
$('.bold_green.bold_blue').addClass('something-else');
Ou en CSS:
.bold_green.bold_blue { color: pink; }
Notez qu'il n'y a pas d'espace entre les sélecteurs.
Vous n'avez besoin de rien de spécial, juste
.bold_green.bold_blue { color:pink; font-style:italic; }
Paul et Voyager sont corrects pour les multiples catégories de cas.
Pour le cas "a un enfant", vous utiliseriez:
.bold_green .bold_blue { ... } /* note the ' ' (called the descendant selector) */
Qui va styliser tous les éléments bold_blue à l'intérieur d'un élément bold_green.
Ou si vous vouliez un enfant DIRECT:
.bold_green > .bold_blue { ... } /* this child selector does not work in IE6 */
Qui ne stylisera que bold_blue les éléments qui ont un parent immédiat bold_green.
Dans visual studio 2013, le paramètre CSS est appliqué à plusieurs classes par une "virgule" comme suit:
.bold_green, .bold_blue { color:pink; font-style:italic; }