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 vertdiv.avertissement
, qui cible les éléments<div>
avec la classeavertissement
pour que ceux-ci ressemblent à une boîte d'avertissement)#personnalise
, qui cible l'élément avec l'identifiantpersonnalise
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 ! Il y a des sorciers pas loin !
</div>
<div id="personnalise">
<p>Un texte heureux.</p>
<div class="avertissement">
Attention ! Il y a des sorciers pas loin !
</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 de type
- Les sélecteurs composites
- Liste de sélecteurs
A, B
- Liste de sélecteurs
- Les combinateurs
- Pseudo