change font-size of nested elements in list

Question

Hi,

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.

Answer 3

i know this may be little tricky, but if you have access to your js code that generate the UL LI tree, assuming you are generating it with jQuery OR other server side language, then you can count while looping and assign a class to the 4th UL

DEMO: http://jsbin.com/abaso3/4

for example:

$(function() {
 $('#menu_tree ul').each(function(e) {
 if ( e == 3 )
 $(this).attr('class', 'stop_to_4');
  });
});

then you can do

UL.stop_to_4 LI { font-size: 8px }