Les sélecteurs simples se révèlent vite un peu trop grossiers. Les sélecteurs de type de balise sélectionnent tous les éléments du type en question, par exemple tous les paragraphes (p) ou tous les items de listes (li). On a vu qu'on pouvait utiliser des classes pour affiner la sélection, mais cela oblige à modifier le code html des pages elles-mêmes - des classes trop nombreuses diminuent la lisibilité et augmentent les manipulations.
Les sélecteurs composés autorisent une sélection plus fine des éléments à mettre en forme, à partir de leurs ascendants ou de leurs frères précédents.
Remarque: comme tous les éléments de type paragraphes (<p> ... </p>) sont sélectionnés par le sélecteur CSS p , on confondra parfois les éléments HTML sélectionnés et leur sélecteur CSS. Cela facilitera certaines formulations, on parlera par exemple des éléments p pour désigner l'ensemble des éléments HTML sélectionnés par le sélecteur CSS p .
Un sélecteur composé est formé à partir des sélecteurs simples déjà vus (type de balise, classe, identificateur, ou encore *) et d'opérateurs, par exemple:
.menu li (2 sélecteurs de base séparés par une espace)h1+p (ici, séparés par un +)#entete>h1+ul (ici, 3 sélecteurs séparés par + et >)
Quelles sont les balises ciblées par ces sélecteurs? C'est toujours l'élément le plus à droite :
h1+p sélectionne certains p (ceux qui sont frère adjacent d'un élément h1)..menu li sélectionne certains li (ceux qui sont descendants d'un élément de classe .menu).Quels sont ces opérateurs, et que permettent-ils de sélectionner? Voici un tableau pour quatre d'entre eux, les plus courants, et qu'il faut connaître. Dans ce tableau, s1 et s2 sont deux sélecteurs quelconques.
| Sélecteur | Sélection |
s1>s2 | les éléments sélectionnés sont "tous les s2 qui sont enfants d'un élément s1" |
s1 s2 | les éléments sélectionnés sont "tous les s2 qui sont descendants d'un élément s1" |
s1+s2 | les éléments sélectionnés sont "tous les s2 qui sont frère adjacent d'un élément s1" |
s1~s2 | les éléments sélectionnés sont "tous les s2 qui sont frères suivants d'un élément s1" |
Quel est leur intérêt ? Nous verrons par la suite (dans certains exercices en dernière page, mais surtout dans des TDs à venir) qu'ils permettent de mieux cibler les éléments à mettre en forme en utilisant leur généalogie dans l'arbre des éléments. En attendant, l'exercice ci-dessous permet de visualiser leur effet.
Téléchargez cette page web (arbre.html), ouvrez-la avec Notepad++/Bluefish et Firefox, et faites ce qui est écrit dedans.
Ne la fermez pas à la fin, on s'en ressert tout de suite.