Sélecteur d’ID

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

Le sélecteur d'ID est utilisé pour cibler un élément HTML spécifique en fonction de la valeur de son attribut id. Contrairement aux sélecteurs de classe, qui peuvent être utilisés pour styliser plusieurs éléments, les sélecteurs d'ID sont uniques et ne peuvent être appliqués qu'à un seul élément sur une page. Cela les rend utiles pour styliser des éléments individuels avec des styles spécifiques qui ne devraient être appliqués à aucun autre élément.

Pour cibler un élément avec un ID spécifique dans votre CSS, vous utilisez un symbole dièse (#) suivi de la valeur de l'ID. Voici la syntaxe de base pour utiliser un sélecteur d'ID :

#idname {
    property: value;
}

Par exemple :

#intro {
    color: blue;
    font-size: 20px;
}

Dans cet exemple, le sélecteur d’ID #intro cible l’élément ayant l’ID « intro ». Les déclarations définissent la couleur du texte sur bleu et la taille de police sur 20 pixels pour cet élément.

Défi

Facile

On vous donne un document HTML avec différents éléments, notamment un titre (<h1>), un paragraphe (<p>) et une division (<div>). Votre tâche consiste à utiliser un sélecteur d’ID pour appliquer un style à un élément de division. Suivez les étapes ci-dessous :

Ajoutez un attribut id avec la valeur "special" à l’élément <div>.
Écrivez une règle CSS utilisant un sélecteur d’ID qui cible l’élément ayant l’ID "special". Définissez la couleur d’arrière-plan de cet élément sur le jaune et la couleur du texte sur le rouge.

Essayez vous-même

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