[CSS] Les sélecteurs CSS, comment formater une liste hiérarchique ?

Le but de cet article est de colorer dynamiquement les différents niveaux d'une liste numérotée d'un article.

Avant	Après

Je ne vais pas détailler ici tous les sélecteurs possibles.
Les types de sélecteur sont détaillés ici : Les sélecteurs en CSS3

Créez tout d'abord une liste hiérachique : c'est-à-dire une liste à plusieurs niveaux.

Commencez par écrire le premier élément puis cliquez sur le bouton « Numérotation ».
Pour passer au niveau suivant (décalé vers la droite), utilisez le bouton « Augmenter le retrait », accessible en mode d'éditeur « Expert ».
Bien évidemment, « Diminuer le retrait » fait l'inverse.
Choisissez une numérotation différente pour chaque niveau (dans la liste déroulante « Numérotation »).
Cela nous permettera de différencier les niveaux pour leur appliquer un style différent.

Voici les boutons de l'éditeur qui sont utiles :

 J'ai créé pour cet article une liste avec :

• un niveau 1 de type « Par Défaut » (numérique) ;
• un niveau 2 de type « Alpha-Minuscule » ;
• et un niveau 3 de type « Romain minuscule ».

Vous devriez avoir ceci :

En basculant vers l'éditeur de Code Source, on voit ce code :

<ol>
<li>Niveau 1-1<ol style="list-style-type: lower-alpha;">
<li>Niveau 2-a</li>
<li>Niveau 2-b<ol style="list-style-type: lower-roman;">
<li>Niveau 3-i</li>
<li>Niveau 3-ii</li>
</ol></li>
<li>Niveau 2-c</li>
</ol></li>
<li>Niveau 2-2</li>
</ol>

Que je remets en forme ici pour plus de lisibilité :

<ol>
	<li>Niveau 1-1
		<ol style="list-style-type: lower-alpha;">
			<li>Niveau 2-a</li>
			<li>Niveau 2-b
				<ol style="list-style-type: lower-roman;">
					<li>Niveau 3-i</li>
					<li>Niveau 3-ii</li>
				</ol>
			</li>
			<li>Niveau 2-c</li>
		</ol>
	</li>
	<li>Niveau 2-2</li>
</ol>

Chaque niveau de liste est défini par <ol>, et chaque élément de liste par <li>.

Le code CSS peut être ajouté dans le menu « Apparence » => « Modifier le thème » => « Ajouter du CSS ».

Comme on souhaite l'appliquer uniquement à l'article qui contient la liste, il faut d'abord repéré son identifiant avec les outils de développement par exemple.

L'identifiant de mon article est #module_contenu_article106949204.
Vous devrez remplacer la partie numérique par le numéro de votre article.

Ensuite on défini le CSS du premier niveau de liste :

#module_contenu_article106949204 OL > LI {
	COLOR: darkred; MARGIN-LEFT: 15px; FONT-SIZE: 20px
}

Un espace entre deux sélecteurs signifie par exemple ici : tous les OL à l'intérieur de mon élément d'identifiant #module_contenu_article106949204.
Un signe supérieur signifie par exemple ici : tous les LI placés directement dans un OL (mais pas ceux qui seraient d'un niveau inférieur dans un sous-élément de OL).

On définit ci-dessus une couleur rouge foncé avec une taille de texte de 20 pixels.
Notez qu'on ajoute également une marge de 15 pixels pour s'assurer que les numéros à gauche soit complétement visibles car la taille agrandie des caractères risque de rendre une partie des numéros invisibles.

Puis le deuxième niveau de liste, en bleu :

#module_contenu_article106949204 OL OL > LI {
	COLOR: darkblue; MARGIN-LEFT: 12px; FONT-SIZE: 17px
}

Et enfin le troisième niveau de liste, en noir :

#module_contenu_article106949204 OL OL OL > LI {
	COLOR: black; MARGIN-LEFT: 10px; FONT-SIZE: 12px
}

On a ainsi trois lignes de CSS, chacune définissant un niveau plus fin.
Chaque élément de liste (LI à l'intérieur d'un OL) est d'abord coloré en rouge.
Puis si on trouve deux niveaux de liste (LI à l'intérieur d'un OL lui-même à l'intérieur d'un OL), on colore en bleu.
Et le troisième niveau colore en noir les éléments LI à l'intérieur de trois OL.

Voici le code à placer dans le CSS, après avoir mis l'identifiant de votre article :

#module_contenu_article106949204 OL > LI {
	COLOR: darkred; MARGIN-LEFT: 15px; FONT-SIZE: 20px
}

#module_contenu_article106949204 OL OL > LI {
	COLOR: darkblue; MARGIN-LEFT: 12px; FONT-SIZE: 17px
}

#module_contenu_article106949204 OL OL OL > LI {
	COLOR: black; MARGIN-LEFT: 10px; FONT-SIZE: 12px
}

Si vous souhaitez placer ce code directement dans l'article, vous pouvez ajouter (dans l'éditeur de Code Source) le code entre des balises « style » de cette manière :

<style type="text/css"><!--
#module_contenu_article106949204 OL > LI {
	COLOR: darkred; MARGIN-LEFT: 15px; FONT-SIZE: 20px
}

#module_contenu_article106949204 OL OL > LI {
	COLOR: darkblue; MARGIN-LEFT: 12px; FONT-SIZE: 17px
}

#module_contenu_article106949204 OL OL OL > LI {
	COLOR: black; MARGIN-LEFT: 10px; FONT-SIZE: 12px
}

--></style>

Et voici le résultat obtenu :

1. Niveau 1-1
   1. Niveau 2-a
   2. Niveau 2-b
      1. Niveau 3-i
      2. Niveau 3-ii
   3. Niveau 2-c
2. Niveau 2-2

L'intérêt d'utiliser du code CSS plutôt que de formater manuellement chaque ligne est que lorsqu'on ajoute un nouvel élément de liste, celui-ci est automatiquement formaté.
Et il est possible de modifier en une seule opération la couleur ou la taille d'un niveau de liste.