Sélecteur de classe

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 12 sur 76.

Le sélecteur de classe est utilisé pour 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 dans l'ensemble de votre document. Les sélecteurs de classe sont particulièrement utiles lorsque vous souhaitez styliser un groupe d'éléments de la même manière, quels que soient leurs noms de balises.

Pour cibler des éléments avec une classe spécifique dans votre CSS, vous 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 en jaune et la couleur du texte en noir pour ces éléments.

Défi

Facile

On vous donne un document HTML avec divers éléments, y compris des titres (<h1>, <h2>), des paragraphes (<p>) et des divisions (<div>). Certains de ces éléments ont un attribut class. Votre tâche consiste à utiliser des sélecteurs de classe pour styliser ces éléments. Suivez les étapes ci-dessous :

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

Aide-mémoire

Le sélecteur de classe cible les éléments HTML en fonction de la valeur de leur attribut class. Utilisez un point (.) suivi du nom de la classe :

.classname {
    property: value;
}

Exemple :

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

Ceci cible tous les éléments ayant class="highlight" et applique les styles spécifiés.

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>