Le selecteur est la première chose qu'on écrit dans une règle css, il désigne a quel élément le style s'applique.
Ce selecteur est très simple : il permet d'appliquer une règle à tous les éléments de même type.
Exemple :
p {
color:black;
background-color:white;
}Le texte de tous les paragraphes du site seront en noir sur fond blanc.
Ce selecteur est utilisé quand on a spécifié l'attribut class d'une balise
Exemple de code XHTML
<span class="jour">Lundi</span>
<p class="jour">Tous les jours de la semaine</p>
On applique le style suivant autant au texte du span que du paragraphe :
.jour {
color:red;
background-color:#FFFFFF;
}Ce selecteur est utilisé quand on a spécifié l'attribut id d'une balise
Attention : l'attribut id est unique : on ne peut pas avoir 2 balises avec le même id sur une même page
Exemple de code XHTML :
<div id="contenu">Texte du contenu</div>
On applique le style suivant au texte contenu par l'élément dont l'id est "contenu" :
#contenu {
color:#F00;
background-color:#00F;
}Ces selecteurs sont un peu à part, le mieux, c'est de les introduire par l'exemple.
Au survol de la souris colorer en vert tous les liens :a:hover {
color:green;
}Attention a mettre cette règle après celle spécifiant le style des liens !
La pseudo-classe hover n'est correctement interprétée par IE que pour les liens.
On peut désigner plusieurs objets pour y appliquer le même style, exemple :
h1, div.contenu{
color:blue;
background-color:white;
}On applique ici le même style aux éléments h1 et les div de classe "contenu"
Il permet de désigner un élément contenu par un autre
Exemple de code XHTML :
<div>
<p>Contenu du paragraphe </p>
</div>Style CSS concernant uniquement les paragraphes dans les div :
div p {
color:black;
background-color:white;
}Il faut user et abuser des sélecteurs hierarchiques dans les CSS, ils permettent d'eviter d'utiliser des attributs class à tour de bras.