Sélecteur CSS

Un sélecteur CSS est la partie de la règle CSS qui désigne les éléments d'un document ciblés par cette règle. Les éléments correspondants se verront appliquer la mise en forme indiquée par la règle.

Exemple

Prenons comme exemple ce fragment de code CSS :

css
p {
  color: green;
}

div.avertissement {
  width: 100%;
  border: 2px solid yellow;
  color: white;
  background-color: darkred;
  padding: 0.8em 0.8em 0.6em;
}

#personnalise {
  font:
    16px Lucida Grande,
    Arial,
    Helvetica,
    sans-serif;
}

Les sélecteurs sont ici :

  • p, qui cible les éléments <p> et qu'on utilise ici pour que le texte de ces éléments soit vert
  • div.avertissement, qui cible les éléments <div> avec la classe avertissement pour que ceux-ci ressemblent à une boîte d'avertissement)
  • #personnalise, qui cible l'élément avec l'identifiant personnalise pour appliquer une mise en forme utilisant une police de caractères de 16 pixels, Lucida Grande ou l'une des polices de secours.

Nous pouvons ensuite appliquer ce CSS à du HTML, tel que :

html
<p>Un texte heureux.</p>

<div class="avertissement">
  Attention&nbsp;! Il y a des sorciers pas loin&nbsp;!
</div>

<div id="personnalise">
  <p>Un texte heureux.</p>

  <div class="avertissement">
    Attention&nbsp;! Il y a des sorciers pas loin&nbsp;!
  </div>
</div>

Le contenu de la page résultant ressemble à ceci:

Voir aussi