15. Sélection hiérarchique
L’imbrication dans les sélecteurs permet aux règles CSS de ne concerner que les éléments descendants d’autres éléments précis.
Allez plus loin
Il est possible de prendre en compte les attributs des éléments pour les sélectionner.
exemple:
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 <a href="..." title="menu">lien en bleu</a>.
accéder à l'article suivant
On écrira le sélecteur sous la forme « ancêtre descendant » en séparant chaque élément d’un blanc.
exemple :
#menu li a img {border-width: 0; }
ne supprimera que les bordures des images contenues dans un lien lui-même contenu dans l'objet d'une liste contenue dans l'identificateur menu.
Il n’est pas nécessaire que les balises descendent directement l’une de l’autre : un ancêtre plus lointain conviendra.
Ainsi, l'exemple ci-dessus pourra s'écrire:
#menu img {border-width: 0; }
exemple :
#menu li a img {border-width: 0; }
ne supprimera que les bordures des images contenues dans un lien lui-même contenu dans l'objet d'une liste contenue dans l'identificateur menu.
Il n’est pas nécessaire que les balises descendent directement l’une de l’autre : un ancêtre plus lointain conviendra.
Ainsi, l'exemple ci-dessus pourra s'écrire:
#menu img {border-width: 0; }
Lorsque l’ancêtre descendant est une classe, on séparera celle-ci de son élément ascendant par un point.
exemple :
a.toto {background-color: yellow; }
ne désignera que les liens <a> de la classe toto.
exemple :
a.toto {background-color: yellow; }
ne désignera que les liens <a> de la classe toto.
Allez plus loin
Il est possible de prendre en compte les attributs des éléments pour les sélectionner.
exemple:
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 <a href="..." title="menu">lien en bleu</a>.
accéder à l'article suivant
Publicité