Les différents éléments composant un fichier HTML (titres, paragraphes, listes, liens, images…) s’organisent sous la forme d’un « arbre généalogique », que l’on nomme également « arbre du document » (ou DOM pour Document Object Model).

Au chargement de la page HTML, la navigateur construit un modèle arborescent correspondant à l'ensemble des balises de la page web appelé le DOM. Il charge ensuite la ou les feuilles de styles puis applique les différentes règles aux objets du DOM au fur et à mesure de la lecture des styles.

Il est possible de pointer (cibler) certains éléments en fonction de leur situation dans le document (degrés de parenté).

Selon la structure du document et principalement son arborescence (c’est-à-dire la hiérarchie des blocs, chacun étant placé « sous » l’éventuel bloc qui le contient), il est possible de pointer directement certains éléments en fonction de leur situation dans le document. Cette technique porte le nom de « sélection hiérarchique ».

Les sélecteurs et l'arborescence

1. Ciblage des sélecteurs

2. Cibler les descendants - limiter à certaines classes ou id

Les différents éléments composant un fichier HTML (titres, paragraphes, listes, liens, images…) s’organisent sous la forme d’un « arbre généalogique », que l’on nomme également « arbre du document » (ou DOM pour Document Object Model).

Il est possible de pointer (cibler) certains éléments en fonction de leur situation dans le document (degrés de parenté). Selon la structure du document et principalement son arborescence (c’est-à-dire la hiérarchie des blocs, chacun étant placé « sous » l’éventuel bloc qui le contient), il est possible de pointer directement certains éléments en fonction de leur situation dans le document. Cette technique porte le nom de « sélection hiérarchique ».
Les sélecteurs descendants permettent de cibler les descendants d’un élément ou d’un groupe d’éléments donnés. Ils sont indiqués par un espace entre deux autres sélecteurs.

3. Simplifier grâce à la hiérarchie