Modifier la taille des polices des éléments imbriqués dans la liste

Question

J'ai une liste imbriquée d'éléments ul. Je voudrais diminuer la taille de la police de quelques pixels pour chaque niveau. Ainsi, par exemple, les premiers éléments li auraient la taille de police 18px, alors les éléments imbriqués auraient une taille de police de 16px et tous les éléments imbriqués auraient une taille de police de 14px etc. Cependant, une fois la taille de la police atteinte par exemple 8px Je voudrais arrêter de les rendre plus petits.

Ces listes sont générées à la volée, donc je n'ai aucun moyen de savoir à quelle profondeur elles vont être, donc je ne peux pas coder en dur le CSS à un certain niveau. Y at-il un moyen dans css ou JQuery où je pourrais appliquer ce type de formatage?

Answer 1

Vous pouvez définir la taille de la police pour cent qui en cascade:

li { font-size: 90%; } 

EDIT:

Je suppose que ce serait alors préférable de définir les quatre niveaux manuellement:

BTW, gardez à l'esprit que certains navigateurs permettent à l'utilisateur de définir une taille de police minimale.

li { font-size: 16px } 
li li { font-size: 14px } 
li li li { font-size: 12px } 
li li li li { font-size: 10px } 
li li li li li { font-size: 8px } 

Je l'ai par exemple réglé à 12px.

Answer 2

li { font-size: 90%; } 

Le premier li obtiendrait 90%, un premier imbriqué ci-dessous qui obtiendrait 90% de 90% et ainsi de suite.

li li li li { font-size: 100%; } 

... d'arrêter après 4 niveaux.