6

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?

SilentGhost
  • 307,395
  • 66
  • 306
  • 293
John
  • 21,047
  • 43
  • 114
  • 155
  • More a general remark on proper list nesting [here](https://stackoverflow.com/questions/5899337/proper-way-to-make-html-nested-list). At least I wondered why the solutions here didn't work for me until realized my nesting problem. – Daniel Sep 02 '18 at 16:50

2 Answers2

9
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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thanks this solution is easier than I thought. However it wouldn't stop at a certain font size so if my list became very deep the text would become un-readable – John Apr 29 '10 at 09:31
7

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.

RoToRa
  • 37,635
  • 12
  • 69
  • 105
  • Thanks this solution is easier than I thought. However it wouldn't stop at a certain font size so if my list became very deep the text would become un-readable. – John Apr 29 '10 at 09:30
  • Thanks again for your suggestion. Would any levels below 4 simply be assigned font size 8px? – John Apr 29 '10 at 09:42