»Sélecteurs
On a déjà appris à manipuler via CSS des éléments HTML en y faisant référence par leur id (avec #), par leur classe (avec .), par leur type (avec le nom de la balise).
Nous allons maintenant voir qu'il est possible d'agencer ces références afin d'être encore plus précis dans la localistaion des balises sur lesquels on veut agir, sans pour autant multiplier les classes ou les id.
factorisation
on peut factoriser une suite de règle pour plusieurs sélecteurs en séparant les sélecteurs par des ,
h1, h2, h3{
color: blue;
}
Les trois premiers niveaux de titres sont alors affichés en bleu
une classe appliquée à un élément HTML (balise) praticulier
pour le cas d'une classe on peut définir une règle spécifique à l'application de cette classe à un type de balise, en faisant précéder le nom du type de balise devant le nom de la classe
.maClasse{
color: blue;
}
p.maClasse{
text-align: center;
} Tout les éléments HTML ayant pour classe maClasse s'afficheront en bleu. Mais seuls les éléments de type <p> ayant pour classe maClasse s'afficheront en bleu centré.
descendant selector
on peut indiquer également une séquence de sélecteurs déscendante (descendant selector), qui permet d'appliquer les règles au dernier élément de cette séquence. les éléments de la séquence doivent être imbriqués les un dans les autres, au sens large pour que la règle soit appliquée. Les sélecteurs sont alors séparés entre eux par un espace
p ul span{
color: blue;
} Décrit le motif
<p>...
<ul> ... <span>texte en bleu</span>
...</ul>
...</p>
Child selector
on peut indiquer également une séquence de sélecteurs directement parents (Child selector), qui permet d'appliquer les règles au dernier élément de cette séquence. Les éléments de la séquences doivent être parents directs (imbriqués directement les uns dans les autres) , pour que la règle soit appliquée. Les sélecteurs sont alors séparés entre eux par un >
p > ul{
color: blue;
} Décrit le motif
<p>
<ul> ... <span>texte en bleu</span>
...</ul>
...</p>
<!-- mais ne s'applique pas au cas -->
<p>
un petit peu de texte
<ul> ... <span>texte en bleu</span>
...</ul>
...</p>
Adjacent selector
on peut indiquer également une séquence de sélecteurs adajacents (Adjacent selector), qui permet d'appliquer les règles à tous les éléments adjacents listés dans la séquence. Les éléments doivent avoir le même parent (être contenu directrement dans la même balise), pour que la règle soit appliquée. Les sélecteurs sont alors séparés entre eux par un +
p > ul{
color: blue;
} Décrit le motif
<div>
<p>un petit peu de texte</p>
<ul> <span>texte en bleu</span> </ul>
</div>
