web-dev-qa-db-fra.com

Comment sélectionner un élément qui a une certaine classe?

D'après ce que je comprends, utiliser element.class devrait permettre à un élément spécifique affecté à une classe de recevoir un "style" différent du reste de la classe. Ce n’est pas une question de savoir si cela devrait être utilisé ou non, mais j’essaie plutôt de comprendre comment ce sélecteur est censé fonctionner. En regardant une tonne d'exemples sur Internet, je pense que la syntaxe est correcte et je ne comprends pas pourquoi cela ne fonctionne pas.

Voici un exemple:

CSS:

h2 {
    color: red;
}

.myClass {
    color: green;
}

h2.myClass {
    color: blue;
}

HTML:

<h2>This header should be RED to match the h2 element selector</h2>
<div class="myClass">
    <h1>This header should be GREEN to match the class selector</h1>
    <h2>This header should be BLUE to match the element.class selector</h2>
</div>
htmlcsssyntaxcss-selectors
64
Carolyn

Cela devrait être comme ça:

h2.myClass recherche h2 avec la classe myClass. Mais vous voulez réellement appliquer un style pour h2 dans .myClass afin de pouvoir utiliser le sélecteur de descendant .myClass h2.

h2 {
    color: red;
}

.myClass {
    color: green;
}

.myClass h2 {
    color: blue;
}

démo

Ceci ref vous donnera une idée de base sur les sélecteurs et jetter un oeil à sélecteurs descendants

86
PSL

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 (imbriqués dans) avec class="myClass".

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

.myClass h2 {
    color: blue;
}

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

<h2 class="myClass">This header should be BLUE to match the element.class selector</h2>
50
ASGM

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

<span class="large"> </span>
<p class="large"> </p>

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

p.large {
    color:blue;
}

La taille et l'épaisseur de police de .large seront attribuées à votre étendue et à p, mais la couleur bleue ne sera attribuée qu'à p.

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

10
Andrew Clody

h2.myClass n'est valide que pour les éléments h2 ayant attribué la classe myClass directement.

Vous voulez le noter comme ceci:

.myClass h2

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

2
RienNeVaPlu͢s