Sélecteur d'ID

Fait partie de la section Styling with 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 avec l'ID "intro". Les déclarations définissent la couleur du texte sur bleu et la taille de la police à 20 pixels pour cet élément.

Défi

Facile

On vous donne un document HTML avec divers éléments, incluant un titre (<h1>), un paragraphe (<p>) et une division (<div>). Votre tâche consiste à utiliser un sélecteur d'ID pour styliser 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 avec l'ID "special". Définissez la couleur d'arrière-plan de cet élément sur yellow et la couleur du texte sur red.

Aide-mémoire

Le sélecteur d'ID cible un élément HTML spécifique en utilisant son attribut id. Les sélecteurs d'ID sont uniques et ne peuvent être appliqués qu'à un seul élément sur une page.

Utilisez un symbole dièse (#) suivi de la valeur de l'ID :

#idname {
    property: value;
}

Exemple :

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

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>