Sélecteurs d'ID

Leçon 5 sur 15 du cours Sélecteurs CSS de Coddy.

Un sélecteur d'ID est un type de sélecteur CSS qui sélectionne les éléments possédant un attribut ID spécifique. L'attribut ID est un attribut personnalisé que vous pouvez ajouter aux éléments HTML pour les identifier de manière unique.

Pour sélectionner des éléments avec un ID spécifique, vous utilisez un symbole dièse (#) suivi de la valeur de l'ID. Par exemple, le sélecteur #my-id sélectionne l'élément avec l'ID my-id.

Voici un exemple d'utilisation d'un sélecteur d'ID pour styliser une page web :

#my-id {
  color: red;
  font-size: 2em;
}

Pour ajouter un ID à un élément, écrivez :

<div id="my-id"></div>

Tout comme les sélecteurs de classe, cette règle CSS stylisera l'élément avec l'ID my-id pour qu'il soit rouge et ait une taille de police de 2em.

Défi

Facile

Voici un exercice pour tester votre compréhension des sélecteurs d'ID :

Créez une page web avec deux éléments div.
Donnez au premier élément div l'ID my-id.
Utilisez un sélecteur d'ID pour styliser l'élément div avec l'ID my-id pour qu'il ait une couleur autre que le noir et une taille de police de 30px.

Essayez vous-même

<html>
<head>
  <title>ID Selector Exercise</title>
  <style>
    /* CSS Code goes here */
  </style>
</head>
<body>
    
</body>
</html>

Toutes les leçons de Sélecteurs CSS

1Introduction aux sélecteurs CSS

Rôle des sélecteurs CSS Pourquoi sont-ils importants ?

4Sélecteurs d'attributs

Introduction aux sélecteurs d'attributs Présence et valeurs exactes Sélecteurs de valeur d'attribut Sélecteurs de valeur d'attribut II Sélecteurs de valeur d'attribut III

2Sélecteurs simples

Sélecteurs de type Sélecteurs de classeSélecteurs d'IDSélecteurs universels

3Sélecteurs combinateurs

Sélecteur d'enfant Sélecteur de descendant Sélecteur de frère adjacent Sélecteur de frère général