Introduction aux feuilles de styles CSS
CHAPITRE 3
53
Tous les liens descendant de la balise
Pour des raisons de compatibilité, nous n’évoquerons pas ces procédés, malheureusement pas pris en charge par l’incontournable Internet Explorer 6. Ces techniques de
sélection hiérarchique ayant cependant le vent en poupe, il est recommandé de s’y
intéresser. Vous pourrez notamment consulter la documentation CSS en ligne du
centre de formation Mediabox, à l’adresse http://wiki.media-box.net/documentation/css
#menu a {propriétés}
#menu li a {propriétés}
NOUVEAUTÉ Internet Explorer 7 change la donne
La dernière version du navigateur de Microsoft prend en charge plusieurs nouveaux sélecteurs CSS2 :
• :first-child désigne le premier élément de son élément parent.
• div>p : le signe « > » désigne un sélecteur d’enfant. Il s’applique à l’élément
CHAPITRE 3
53
Tous les liens descendant de la balise
- (via l’élément intermédiaire
- ), il
est très facile de les désigner par leur position hiérarchique :
On peut évidemment préciser cette déclaration en ajoutant des éléments de l’arborescence. Dans ce même exemple, on obtiendrait le même résultat en explicitant dans
le sélecteur le niveau hiérarchique intermédiaire :
Familiarisez-vous dès maintenant avec ces notations, car elles reviendront continuellement dans les exemples de l’ouvrage.
Autres sélecteurs hiérarchiques
Les normes CSS 2 et CSS 3 (actuellement en préparation) prévoient d’autres formes
de sélection hiérarchique. On peut ainsi ne désigner que le premier enfant d’un élément, ne pointer que des éléments directement adjacents à un autre, etc.
Il est même possible de prendre en compte les attributs des éléments pour les sélectionner. Ainsi, la règle a[title="menu"] {color: blue;} ne colorera en bleu que les
liens possédant un attribut title de valeur menu. C’est par exemple le cas de
Pour des raisons de compatibilité, nous n’évoquerons pas ces procédés, malheureusement pas pris en charge par l’incontournable Internet Explorer 6. Ces techniques de
sélection hiérarchique ayant cependant le vent en poupe, il est recommandé de s’y
intéresser. Vous pourrez notamment consulter la documentation CSS en ligne du
centre de formation Mediabox, à l’adresse http://wiki.media-box.net/documentation/css
#menu a {propriétés}
#menu li a {propriétés}
NOUVEAUTÉ Internet Explorer 7 change la donne
La dernière version du navigateur de Microsoft prend en charge plusieurs nouveaux sélecteurs CSS2 :
• :first-child désigne le premier élément de son élément parent.
• div>p : le signe « > » désigne un sélecteur d’enfant. Il s’applique à l’élément
enfant de
.
• div+p : le signe « + » désigne un sélecteur adjacent. Il s’applique à
• div+p : le signe « + » désigne un sélecteur adjacent. Il s’applique à
lorsqu’il est précédé d’un élément
.
• a[title="menu"] : le sélecteur d’attribut s’applique sur un élément (ici ) lorsque l’attribut de l’élément (ici title) contient une valeur définie (ici "menu").
• a[title="menu"] : le sélecteur d’attribut s’applique sur un élément (ici ) lorsque l’attribut de l’élément (ici title) contient une valeur définie (ici "menu").