Comment sélectionner un élément ayant une certaine classe?

Je crois comprendre que l’utilisation de element.class devrait permettre à un élément spécifique assigné à une classe de recevoir un style différent de celui du rest de la classe. Ce n’est pas une question de savoir si cela devrait être utilisé ou non, mais plutôt j’essaie de comprendre comment ce sélecteur est destiné à fonctionner. En regardant une tonne d’exemples sur Internet, je pense que la syntaxe est correcte et ne comprend pas pourquoi cela ne fonctionne pas.

Voici un exemple:

CSS:

 h2 { color: red; } .myClass { color: green; } h2.myClass { color: blue; } 

HTML:

 

This header should be RED to match the h2 element selector

This header should be GREEN to match the class selector

This header should be BLUE to match the element.class selector

Cela devrait être comme ça:

h2.myClass recherche h2 avec la classe myClass . Mais vous voulez en fait appliquer un style à h2 dans .myClass pour pouvoir utiliser le sélecteur descendant .myClass h2 .

 h2 { color: red; } .myClass { color: green; } .myClass h2 { color: blue; } 

Démo

Cette référence vous donnera une idée de base sur les sélecteurs et examinera les sélecteurs descendants

h2.myClass fait référence à tous les h2 avec class="myClass" .

.myClass h2 fait référence à tous les h2 qui sont des enfants d’éléments (c’est-à-dire nesteds dans) avec class="myClass" .

Si vous souhaitez que le h2 dans votre code HTML apparaisse en bleu, modifiez le code CSS comme suit:

 .myClass h2 { color: blue; } 

Si vous voulez pouvoir référencer cette h2 par une classe plutôt que par son tag, vous devez laisser le CSS tel quel et donner au h2 une classe dans le HTML:

 

This header should be BLUE to match the element.class selector

Le sélecteur element.class est destiné aux situations de style telles que celle-ci:

   

.large { font-size:150%; font-weight:bold; } p.large { color:blue; }

La taille de la police et le poids de la police seront affectés à votre scope et à votre p, mais la couleur bleue sera uniquement affectée à p.

Comme d’autres l’ont fait remarquer, vous travaillez avec des sélecteurs descendants.

h2.myClass n’est valide que pour les éléments h2 auxquels la classe myClass directement atsortingbuée.

Vous voulez le noter comme ceci:

 .myClass h2 

Qui sélectionne tous les enfants de myClass qui ont le nom h2