Sélecteur ID

Rôle

Le sélecteur id, désigné par le signe # permet de cibler un seul et unique élément HTML de la page par le nom de son identifiant

En HTML, l’identifiant est défini par l’attribut id

<input type="text" id="pseudo">

Utilisation du sélecteur ID

#pseudo {
    background-color: silver;
}

Testez vous-même ce sélecteur

Utilisez Codepen.

– Le code CSS

#gauche{
  float: left;
  width: 40%;
  background-color: silver;
  padding: 1%;
}
#droite{
  float: left;
  width: 50%;
  background-color: pink;
  padding: 1%;
}

– Le code HTML

<div id="gauche">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Tenetur reiciendis itaque corrupti, excepturi recusandae doloremque totam cum quisquam error obcaecati sunt asperiores minus in autem et aliquid quis.</div>
<div id="droite">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Quae dignissimos facere, aliquam alias quasi sunt doloremque fuga fugiat itaque dolores accusamus asperiores delectus aut perferendis animi inventore</div>

Résultat

Dans cet exemple, l’identifiant est utilisé pour cibler les sections uniques gauche et droite.

Compatibilité

Le sélecteur id est pris en charge par tous les principaux navigateurs

A voir aussi

.class (sélecteur class)
p (sélecteur balise)
#head p>em (sélecteur contextuel)
p,h1 (sélecteur multiple)
* (sélecteur universel)
p a (sélecteur descendant)
p>a (sélecteur enfant)
[] (sélecteur d’attribut)
[attribut=valeur]
[attribut~=valeur]
[attribut|=valeur]
[attribut^=valeur]
[attribut$=valeur]
[attribut*=valeur]
h1+p (sélecteur adjacent)
h1~p (sélecteur de proximité)