Change font size of nested items in list

Question

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

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

These lists are generated on the fly, so I can’t understand how deep they will be, so I can’t just copy the css code to a certain level. Is there a way in css or jQuery where I could apply this type of formatting?

Answer 1

You can determine the font size in percent, which will be a cascade:

li { font-size: 90%; }

EDIT:

I think then it would be better to define 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 }

By the way, keep in mind that some browsers allow the user to determine the minimum font size. For example, I set the value to 12px.

Answer 2

li { font-size: 90%; }

The first li will receive 90%, one invested below, which will receive 90% 90%, etc.

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

... to stop after 4 levels.