30/11/14

Sélecteurs CSS composés

Télécharger Lights.zip.

Un sélecteur composé est formé à partir des sélecteurs de base déjà vus (balise, classe, identificateurs) et d'opérateurs :

• l'espace : .menu li (2 sélecteurs de base séparés par un espace)
• le + : h1+p ( ici séparés par le signe +)
• le > : #pied>p (ici séparés par >)

Et aussi : #entete>h1+ul (ici 3 sélecteurs séparés par + et >)

Que signifient ces nouveaux sélecteurs ? Quel est leur intérêt : ils permettent de mieux cibler les éléments à mettre en forme.

Prenons le document keepers du TD.

Enfant

Vous remarquerez que dans le document, des mots ont été mis en valeur à certains endroits.

Pour obtenir cet effet, ces mots ont été enveloppés par une balise span (la balise span est une balise "générique" c'est à dire sans sémantique particulière). Nous pourrions faire une mise en forme CSS directe de la balise span (par exemple span {color:red;} ), mais elle s'appliquerait à toutes les occurences de la balise ce que l'on ne souhaite pas : on veut deux mises en forme différentes pour span.

Aussi le document contient deux classes (boldstyle et travaux) permettant d'avoir une mise en forme différente pour les balises span : certaines sont de classe boldstyle et d'autre de classe travaux.

Avec les sélecteurs composés, il existe une autre solution  : remarquons que la balise span qui est dans la liste à puce est un enfant de l'élément li. Nous allons donc définir une règle CSS qui ne sera valable que dans ce cas : li>span {color:yellow;}.

Le sélecteur li>span indique que la règle ne concerne que les éléments span qui sont enfants de l'élément li.

Dans le document keepers, supprimez les classes des éléments span et obtenez les mêmes mise en forme que précédemment avec uniquement des sélecteurs composés.

Autre exemple pour keepers, que permettrait de faire le sélecteur suivant :
#pied > a

Descendant

Le symbole de composition du sélecteur ci-dessus (>) se généralise aux descendants d'un élément : element1 element2 (2 éléments séparés par un espace) est un nouveau sélecteur appelé sélecteur de descendant. Par exemple la règle ul li {color:#FFEECC;} s'applique à tous les li descendants d'un ul alors que la règle ul>li {color:#FFEECC;} ne s'applique qu'aux enfants de ul.

• Le sélecteur : p span désigne les éléments span descendants d'un élément p
• Le sélecteur : .truc h1 désigne les éléments h1 descendants d'un élément de classe truc
• Le sélecteur : #navig ul désigne les éléments ul descendants d'un élément identifié par navig

Adjacent

Supposons que dans notre document chaque titre de niveau 3 soit suivi d'un paragraphe explicatif ; nous souhaitons que ce premier paragraphe soit encadré par une bordure gauche. Là encore, il est possible de faire une classe CSS et de l'attribuer à chaque paragraphe concerné, mais remarquons que ces paragraphes sont adjacents à l'élément h3 et le suivent directement dans le code html. La règle CSS suivante évite de faire une classe : h3+p {border-left: 1px solid red;}

À quels li d'une liste s'applique cette règle:
ul>li+li {border-left:1px solid #fff;} ?

Autres exemples pour keepers, que permettraient de faire les sélecteurs suivants :
h1+p
p+p

Dans l'exemple keepers créez un sélecteur composé pour mettre en italique tous les premiers paragraphes après un titre h3.

Exercices

Dans l'arbre ci-dessous repérez à quels éléments s'appliquent les sélecteurs suivants :

• p>img
• ul a
• p+h2
• p a img
• a+a