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

Théoriquement seule cette dernière syntaxe devrait être utilisée puisqu'un seul élément peut êtrese affublévoir deattribué l'identifiant ''nom_id'' dans la page. Il est toutefois courant de voir la première syntaxe utilisée pour des raisons de lisibilité du code.

Une caractéristique fondamentale des règles CSS est que l'on peut spécifier des règles pour les éléments contenus à l'intérieur de certains autres éléments sans ajouter de classe ni d'identifiant. Concrètement, on peut par exemple changer le style d'un lien selon qu'il est dans un paragraphe ou dans une liste. Ceci est rendu possible par la notion de hiérarchie des éléments du document web, conformément à l'imbrication des balises constatée dans le code de la page.

Le document HTML peut en effet être vu comme un arbre dont le tronc est l'élément <tt>html</tt>, les deux principales branches les éléments <tt>head</tt> et <tt>body</tt>, 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 <tt>html</tt> — et un ou plusieurs ''élément(s) enfant(s)'' — sauf les éléments terminant une ramification. CelaCeci 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 descendantdescendants mais au minimum petitpetits-enfantenfants 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 <tt>*</tt> comme un sélecteur descendant particulier :

Les sélecteurs présentés précédemment suffisent pour mettre en œuvre unedes pagepages web undéjà tantcomplexes. soitPour peualler complexe.plus Maisloin, d'autres sélecteurs plus précis permettent de modifier le style d'éléments dans un état spécifique comme les liens visités ou non, les états correspondant à l'interaction de l'utilisateur ou encore des éléments répondants à des critères particuliers.

L'erreur classique consiste à placerattribuer des classes à tous les éléments de la page que l'on souhaite modifier. Le sélecteur de descendant associé soit au sélecteur de classe, soit au sélecteur d'identifiant permet dans la très grande majorité des cas de s'en passer.

Il est possible en HTML de spécifierd'attribuer à la fois un identifiant et une ou plusieurs classes à un même élément de la page. Cette technique permet de réaliser une sorte d'héritage de styles. À nouveau on peut en tirer profit pour réduire la diversité des styles et les concevoir d'une manière plus générique et donc plus facilement ré-utilisable.