change font-size of nested elements in list

Question

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?

Answer 1

li { font-size: 90%; }

The first li would get 90%, one nested below that would get 90% of 90% and so on.

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

… to stop after 4 levels.

Answer 2

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.