Sélecteur de classe

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 12 sur 76.

Le sélecteur de classe sert à sélectionner des éléments HTML en fonction de la valeur de leur attribut class. Il vous permet d’appliquer les mêmes styles à plusieurs éléments de votre document. Les sélecteurs de classe sont particulièrement utiles lorsque vous souhaitez appliquer le même style à un groupe d’éléments, quels que soient leurs noms de balise.

Pour cibler des éléments ayant une classe spécifique dans votre CSS, utilisez un point (.) suivi du nom de la classe. Voici la syntaxe de base pour utiliser un sélecteur de classe :

.classname {
    property: value;
}

Par exemple :

.highlight {
    background-color: yellow;
    color: black;
}

Dans cet exemple, le sélecteur de classe .highlight cible tous les éléments ayant la classe « highlight ». Les déclarations définissent la couleur d’arrière-plan sur jaune et la couleur du texte sur noir pour ces éléments.

Défi

Facile

On te donne un document HTML contenant divers éléments, notamment des titres (<h1>, <h2>), des paragraphes (<p>) et des divisions (<div>). Aucun d’eux n’a encore de class : tu vas d’abord ajouter les attributs de classe, puis mettre les éléments en forme à l’aide de sélecteurs de classe. Suis les étapes ci-dessous :

Ajoute un attribut class ayant pour valeur "blue-text" à l’élément <h1> et au premier élément <p>.
Ajoute un attribut class ayant pour valeur "large-text" à l’élément <h2> et au deuxième élément <p>.
Écris une règle CSS utilisant un sélecteur de classe qui cible tous les éléments ayant la classe "blue-text". Définis la couleur du texte de ces éléments sur bleu.
Écris une règle CSS utilisant un sélecteur de classe qui cible tous les éléments ayant la classe "large-text". Définis la taille de police de ces éléments sur 24 pixels.

Essayez vous-même

<html>
<head>
    <title>Class Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <div>This is a division.</div>
</body>
</html>