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

Question

Je crois comprendre qu'en utilisant element.class devrait permettre à un élément spécifique affecté à une classe de recevoir un "style" différent de celui du reste de la classe. Il ne s'agit pas d'une question sur l'opportunité de l'utiliser ou non, mais plutôt d'essayer de comprendre comment ce sélecteur est censé fonctionner. Après avoir consulté 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>

Answer 1

Ça devrait être comme ça :

h2.myClass cherche h2 avec classe myClass . Mais vous voulez en fait appliquer le style pour h2 à l'intérieur de .myClass vous pouvez donc utiliser le sélecteur descendant .myClass h2 .

h2 {
    color: red;
}

.myClass {
    color: green;
}

.myClass h2 {
    color: blue;
}

Démo

Ce site réf. vous donnera une idée de base sur les sélecteurs et jetez un coup d'oeil à sélecteurs descendants

Answer 2

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

.myClass h2 se réfère à tous les h2 qui sont enfants de (c'est-à-dire imbriqués dans) des éléments dont le nom est class="myClass" .

Si vous voulez le h2 dans votre HTML pour qu'il apparaisse en bleu, modifiez la CSS comme suit :

.myClass h2 {
    color: blue;
}

Si vous voulez être en mesure de faire référence à cette h2 par une classe plutôt que par sa balise, vous devez laisser la CSS telle quelle et donner à la balise h2 une classe dans le HTML :

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

Answer 3

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

Le span et le p se verront attribuer la taille et le poids de la police de .large, mais la couleur bleue ne sera attribuée qu'au p.

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

Answer 4

h2.myClass est uniquement valable pour h2 qui ont obtenu la classe myClass affectés directement.

Vous voulez le noter comme ceci :

.myClass h2

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

Answer 5

Le CSS :first-child vous permet de cibler un élément qui est le premier élément enfant de son parent.

element:first-child { style_properties }
table:first-child { style_properties }