Détails du sélecteur de classe CSS

Le sélecteur de classe permet de spécifier des styles de manière indépendante des éléments du document.

Sélecteurs de classe CSS

Le sélecteur de classe permet de spécifier des styles de manière indépendante des éléments du document.

Ce sélecteur peut être utilisé seul ou combiné avec d'autres éléments.

Astuce :Seulement après avoir marqué correctement le document, ces sélecteurs peuvent être utilisés, donc utiliser ces deux sélecteurs nécessite généralement une certaine conception et planification préalables.

Pour appliquer un style sans tenir compte de l'élément de conception spécifique, la méthode la plus courante consiste à utiliser le sélecteur de classe.

Modifier le code HTML

Avant d'utiliser le sélecteur de classe, il est nécessaire de modifier les balises du document spécifique afin que le sélecteur de classe fonctionne correctement.

Pour associer le style du sélecteur de classe à l'élément, il est nécessaire de spécifier une valeur de classe appropriée. Voir le code HTML suivant :

<h1 class="important">
Ce titre est très important.
</h1>
<p class="important">
Ce paragraphe est très important.
</p>

Dans le code ci-dessus, les classes des deux éléments sont toutes spécifiées comme important : le premier titre (élément h1), le deuxième paragraphe (élément p).

Syntaxe

Ensuite, nous utilisons la syntaxe suivante pour appliquer des styles à ces éléments classés, c'est-à-dire un point (.) devant le nom de la classe, suivi du sélecteur générique :

*.important {color:red;}

Si vous ne souhaitez sélectionner que tous les éléments ayant le même nom de classe, vous pouvez ignorer le sélecteur générique dans le sélecteur de classe, ce qui n'a pas d'effet négatif :

.important {color:red;}

Essayez-le vous-même

Combiner les sélecteurs d'élément

Les sélecteurs de classe peuvent être combinés avec les sélecteurs d'élément.

Par exemple, vous pourriez vouloir que seuls les paragraphes soient affichés en texte rouge :

p.important {color:red;}

Le sélecteur actuel correspondra à tous les éléments p qui ont la propriété class contenant 'important', mais ne correspondra pas à tout autre type d'élément, que ce soit ou non ce class attribut. Le sélecteur p.important peut être interprété comme : "Tous les éléments p qui ont la propriété class égale à 'important'". Comme l'élément h1 n'est pas un paragraphe, ce sélecteur ne correspond pas et l'élément h1 ne deviendra pas du texte rouge.

Si vous souhaitez vraiment attribuer un style différent aux éléments h1, vous pouvez utiliser le sélecteur h1.important :

p.important {color:red;}
h1.important {color:blue;}

Essayez-le vous-même

Sélecteur de classe multiple en CSS

Dans la section précédente, nous avons traité le cas où une valeur de classe contient un mot. Dans HTML, une valeur de classe peut contenir une liste de mots, séparés par des espaces. Par exemple, si vous souhaitez marquer un élément spécifique à la fois comme important (important) et comme avertissement (warning), vous pouvez écrire :

<p class="important warning">
Ce paragraphe est une mise en garde très importante.
</p>

L'ordre de ces deux mots n'a pas d'importance, on peut également écrire warning important.

Nous supposons que tous les éléments de classe 'important' sont en gras, et que tous les éléments de classe 'warning' sont en italique, et que tous les éléments de classe contenant à la fois 'important' et 'warning' ont un fond argenté. Cela peut être écrit ainsi :

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

Essayez-le vous-même

En combinant deux sélecteurs de classe, seules les sélecteurs peuvent être sélectionnésContient ces noms de classesdes éléments (l'ordre des noms de classes n'est pas limité).

Si un sélecteur de plusieurs classes contient un nom de classe qui n'est pas dans la liste des noms de classes, la correspondance échouera. Voir les règles suivantes :

.important.urgent {background:silver;}

Comme prévu, ce sélecteur ne correspondra qu'aux éléments p qui contiennent les mots 'important' et 'urgent' dans l'attribut class. Par conséquent, si un élément p a uniquement les mots 'important' et 'warning' dans l'attribut class, il ne correspondra pas. Cependant, il correspondra aux éléments suivants :

<p class="important urgent warning">
Ce paragraphe est une alerte très importante et urgente.
</p>

Essayez-le vous-même

Matière à savoir :Dans les versions précédentes d'IE7, les navigateurs Internet Explorer de différentes plateformes ne peuvent pas gérer correctement les sélecteurs de plusieurs classes.