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 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 dotés de 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 vous donne un document HTML avec divers éléments, notamment des titres (<h1>, <h2>), des paragraphes (<p>) et des divisions (<div>). Certains de ces éléments possèdent un attribut class. Votre tâche consiste à utiliser des sélecteurs de classe pour mettre ces éléments en forme. Suivez les étapes ci-dessous :

Ajoutez un attribut class ayant la valeur "blue-text" à l’élément <h1> et au premier élément <p>.
Ajoutez un attribut class ayant 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 ayant la classe "blue-text". Définissez la couleur du texte de ces éléments sur le bleu.
Écrivez une règle CSS utilisant un sélecteur de classe qui cible tous les éléments ayant la classe "large-text". Définissez 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>