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; }
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