Home/ Questions/Q 747105
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T14:10:02+00:00

I have a nested list of ul elements. I would like to decrease the

  • 0

I have a nested list of ul elements. I would like to decrease the font size by a couple of pixels for each level down.

So for example the first li elements would have font size 18px, then nested elements of that would have font size 16px and any nested elements of that would have font size 14px etc. However once the font size gets to a certain size e.g. 8px I would like to stop making them any smaller.

These lists are generated on the fly so I have no way of knowing how deep they are going to be so can’t just hard code the css to a certain level. Is there a way in css or JQuery where I could apply this type of formatting?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can define the font-size in per cent which will cascade:

    li { font-size: 90%; }

    EDIT:

    I guess then it would be better to define the four levels manually:

    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 }

    BTW, keep in mind, that some browsers allow the user to define a minimum font-size. I for example have it set to 12px.

    • 0