Sélecteur (CSS)

Exemple

Prenons comme exemple ce fragment de code 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",
    "Helvetica",
    "Arial",
    sans-serif;
}

Les sélecteurs ici sont "p" (qui applique la couleur verte au texte à l'intérieur de tout élément <p>), "div.warning" (qui fait ressembler tout élément <div> avec la classe "warning" à une boîte d'avertissement), et "#customized", qui définit la police de base de l'élément avec l'ID "customized" à Lucida Grande de 16 pixels de haut ou à l'une des polices de secours.

Nous pouvons ensuite appliquer ce CSS à du HTML, comme :

<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

• En apprendre plus sur les sélecteurs CSS dans l'introduction à CSS

• Les sélecteurs simples

  • Les sélecteurs de type nomelement
  • Les sélecteurs de classe .nomclasse
  • Les sélecteurs d'identifiant #nomid
  • Les sélecteurs universels * ns|* *|*
  • Les sélecteurs d'attribut [attr=valeur]
  • Les sélecteurs d'état a:active, a:visited

• Les sélecteurs composites

  • Liste de sélecteurs A, B

• Les combinateurs

  • Sélecteurs de voisins directs A + B
  • Sélecteurs de voisins généraux A ~ B
  • Sélecteurs d'enfant direct A > B
  • Sélecteurs de descendants A B

• Pseudo

  • Pseudo-classes :
  • Pseudo-éléments ::