|
sélecteur
En bref
Les sélecteurs permettent d'attribuer un style à un élément, cela passe par une syntaxe simple mais très puissante.
Les sélecteurs
En CSS , des règles de reconnaissance de motifs déterminent les règles de style qui s'appliquent aux éléments de l'arbre du document. Ces motifs, nommés sélecteurs, sont variés, allant du simple nom d'un élément jusqu'aux riches motifs contextuels.
Plus simplement ces motifs sont constitués par les balises du HTML et XHTML, comme par exemple : <div> <p> <h1>..... Qui dans le tableau suivant sont aussi nommées éléments et symbolisé par les lettre E et F.
 | | Sélecteurs d'élément, Description |
| * ,sélectionne tous les éléments |
| E ,sélectionne tous les éléments E |
| E + F ,sélectionne tout élément F si celui-ci est immédiatement précédé d'un élément E |
| E E ,sélectionne tous les éléments E qui sont descendants d'un élément E |
| E > F ,sélectionne tous les éléments F qui sont fils (descendant direct) d'un élément E ATTENTION SELECTEUR NON SUPPORTÉ PAR IE |
| .classe ,sélectionne tous les éléments qui contiennent l'attribut class="classe" RAPPEL: l'attribut class="classe" peut être attribué à plusieurs éléments. |
| E.classe ,sélectionne tous les éléments E qui contiennent l'attribut class="classe" |
| #id ,sélectionne l'élément qui contient l'attribut id="id" RAPPEL: l'attribut id="id" est unique vous ne pouvez pas avoir deux fois le même id dans la même page. |
| E#id ,sélectionne l'élément E qui contient l'attribut id="id" |
| E[att] ,sélectionne tout élément E qui contient l'attribut att="qqchose" |
| E ,sélectionne tout élément E qui contient l'attribut att="valeur" |
| E ,sélectionne tout élément E qui contient l'attribut att="val 1 ... val ... val n" ou l'attribut att="val" |
| E:first-child ,sélectionne l'élément E si celui-ci est le premier fils de son père |
| E:link ,sélectionne tout élément E qui est un lien non encore visité |
| E:visited ,sélectionne tout élément E qui est un lien déjà visité |
| E:hover ,sélectionne tout élément E lorsque la souris passe au-dessus de sa représentation dans la fenêtre du navigateur |
| E:active ,sélectionne tout élément E lorsque celui-ci est activé |
| E:focus ,sélectionne tout élément E lorsque celui-ci est prêt à recevoir de donnés fournies par l'usagerS |
| E:lang(lg) ,sélectionne tout élément E dont le nom commence par L |
| E:first-line ,désigne la première ligne de l'élément E |
| E:first-letter ,désigne la première lettre de l'élément E |
|
|
Précisions et exemples
Les éléments ne possèdent pas tous un contenu, on dit alors qu'ils sont vides. Ce contenu peut consister en du texte et peut inclure à son tour des sous-éléments ; on appelle alors l'élément les englobant le parent de ces sous-éléments.
- On appelle un élément E un descendant d'un élément F si E est
- soit (1) un enfant de F,
- soit (2) un enfant d'un autre élément C qui est lui-même un descendant de F ;
- On appelle un élément A l'enfant de l'élément B, si et seulement si B est le parent de A
Ce qui pourrait se traduire par :
<div id="parent">
<div class="enfant"></div>
<div class="enfant"></div>
<div class="enfant"></div>
</div>
Quelques exemples repris du W3C pour illustrer les trois règles les plus importantes:
Les sélecteurs descendants
E E sélectionne tous les éléments E qui sont descendants d'un élément E
Exemple(s) :
Considérons par exemple les règles suivantes :
h1 { color: red }
em { color: red }
Bien que l'intention ait pu être l'emphase d'un texte en changeant sa couleur, l'effet sera perdu dans ce cas-ci :
<h1>Ce titre est <em>très</em> important</h1>
Nous tenons compte de cette éventualité en ajoutant une règle au jeu précédent, celle-ci fixe une couleur bleu au texte d'un élément em survenant dans un élément H1 :
h1 { color: red }
em { color: red }
h1 em { color: blue }
La troisième règle s'appliquera aussi à l'élément EM de cet extrait-ci :
<h1>Ce <span class="myclass">titre est <em>très</em> important.</span></h1>
Autre exemple avec ce sélecteur :
div * p {color: red}
On touche les éléments P qui sont les petits-enfants, ou les descendants plus lointains, d'un élément DIV. Noter les blancs facultatifs de chaque côté du "*".
Les sélecteurs d'enfant
E > F sélectionne tous les éléments F qui sont fils (descendant direct) d'un élément E
Un sélecteur d'enfant se vérifie quand un élément est l'enfant d'un autre élément. Celui-ci se compose de deux sélecteurs, ou plus, séparés par le caractère ">".
Exemple :
La règle suivante applique un style à tous les enfants p de l'élément div :
div> p {color: red}
<div>…
<p>en rouge</p>
<p>en rouge</p>
…
</div>
Par contre dans ce cas cela ne fonctionnera pas
<div>…
<ul>
<li>
<p>Pas en rouge</p>
</li>
</ul>
…
</div>
Les sélecteurs d'enfants adjacents
E + F sélectionne tout élément F si celui-ci est immédiatement précédé d'un élément E
Les sélecteurs d'enfants adjacents suivent une syntaxe de cette forme : E1 + E2, où E2 est le sujet du sélecteur. Celui-ci est vérifié quand E1 et E2 ont le même parent dans l'arbre du document et quand E1 y précède immédiatement E2.
Selon le contexte, les éléments adjacents génèrent un formatage des objets dont la mise en forme est gérée automatiquement (ex. les marges verticales des boîtes adjacentes qui fusionnent). Avec le combinateur "+", les auteurs peuvent ajouter des styles aux éléments adjacents.
Exemple :
h1 + h2 { color: red; }
<div>…
<h1>titre</h1>
<h2>soustitre en rouge</h2>
<p>texte texte</p>
<h2>soustitre pas en rouge</h2>
<p>texte texte</p>
…
</div>
RESSOURCES
Exercice
Cliquez sur /ExerciceSurLesSélecteurs
Voir
BasesDesCss DossierGlossaire
| 
http://www.yoyodesign.org/doc/w3c/css2/selector.html