« Le langage CSS/Les sélecteurs » : différence entre les versions

Le document HTML peut en effet être vu comme un arbre dont le tronc est l'élément <ttcode>html</ttcode>, les deux principales branches les éléments <ttcode>head</ttcode> et <ttcode>body</ttcode>, desquelles partent en ramification toutes les autres branches. Un sélecteur suit ces ramifications, comme une branche de lierre, en partant du tronc, pour désigner une ou des branches — qui sont des éléments HTML. Ainsi, chaque élément a un élément ''parent'' — sauf l'élément racine <ttcode>html</ttcode> — et un ou plusieurs ''élément(s) enfant(s)'' — sauf les éléments terminant une ramification. Ceci définit une hiérarchie dans laquelle il faut pouvoir s'orienter facilement et précisément.

On peut vouloir aussi désigner des éléments descendants mais au minimum petits-enfants dans la hiérarchie mais il peut être laborieux d'expliciter tout le ou les chemin(s) jusqu'aux éléments concernés. Il est possible d'utiliser alors <ttcode>*</ttcode> comme un sélecteur descendant particulier :

Ce sélecteur désigne tous les éléments ''h1'' petits-enfants d'éléments d'identifiant ''wikipedia'', ou situés plus loin dans la hiérarchie du document (par exemple <ttcode>#wikipedia > #contenu > .introduction > h1</ttcode>). Ainsi dans le code HTML suivant :

Le '''sélecteur d'enfant''', noté >, permet de désigner un élément par filiation directe à un autre élément. La relation ne concerne donc que les enfants et non les petits-enfants ou plus. L'élément parent est suivi de <ttcode>></ttcode> puis vient l'élément enfant.

Les pseudo-classes <ttcode>:link</ttcode> et <ttcode>:visited</ttcode> s'adressent uniquement à des liens, donc des balises HTML <code>&lt;a href="…"&gt;…<code>&lt;/a&gt;</code>. Le premier permet de sélectionner les liens qui n'ont pas encore été visités et le second ceux qui l'ont déjà été. Ainsi le code CSS suivant :

Les pseudo-classes <ttcode>:hover</ttcode>, <ttcode>:active</ttcode> et <ttcode>:focus</ttcode> permettent de sélectionner des éléments suivant l'interaction qu'ils ont avec l'utilisateur. Les définitions du W3C sont les suivantes :

La pseudo-classe <ttcode>:first-child</ttcode> désigne le premier enfant d'un élément, c'est-à-dire le premier élément inclus dedans. On peut l'utiliser pour modifier le premier paragraphe d'une page ou encore la première entrée d'une liste. À nouveau l'utilisation de cette pseudo-classe est fortement réduite par le fait que les '''Internet Explorer 5.0, 5.5 et 6.0 de Microsoft ne la reconnaissent pas'''.

La pseudo-classe <ttcode>:lang</ttcode> permet de sélectionner des éléments correspondant à certaines langues. Il faut pour cela que les éléments concernés ou un de leur parent aie(nt) une langue spécifiée, ou encore que la page comporte une mention de langue dans l'entête. Cette pseudo-classe est d'une utilisation extrêmement marginale. Citons tout de même la possibilité de changer le caractère des guillemets utilisés pour les citations dans la balise HTML <code>&lt;q&gt;…&lt;/q&gt;</code>. Nous utilisons en effet « et » en français alors que les anglo-saxons utilisent plutôt “ et ”.

Les pseudo-éléments <ttcode>:first-line</ttcode> et <ttcode>:first-letter</ttcode> désigne respectivement la première ligne et le premier caractère d'un texte, typiquement un paragraphe. Par exemple le code CSS suivant :

Les pseudo-éléments <ttcode>:before</ttcode> et <ttcode>:after</ttcode> se réfèrent au contenu de l'élément. Ils servent à ajouter du texte avant ou après le texte contenu dans l'élément grâce à la propriété CSS <ttcode>content</ttcode>. On s'en sert par exemple pour symboliser les pages précédente et suivante à l'aide de liens (les encodages \00AB et \00BB désignant respectivement les guillemets doubles ouvrants et fermants français):

* Ces pseudo-éléments <ttcode>:before</ttcode> et <ttcode>:after</ttcode> ne sont eux aussi '''pas reconnus par les Internet Explorer de Microsoft''', toute version.

* Une utilisation plus poussée de <ttcode>:before</ttcode> permet de numéroter n'importe quel élément de la page automatiquement mais, bien sûr, pas dans les navigateurs de Microsoft.