change font-size of nested elements in list

Posted by John on Stack Overflow See other posts from Stack Overflow or by John
Published on 2010-04-29T09:25:22Z Indexed on 2010/04/29 10:37 UTC
Read the original article Hit count: 487

Filed under:

css

|

css-font-size

|

html-lists

|

jquery-css

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?

© Stack Overflow or respective owner

Related posts about css

HTMLUNIT Facebook javascript warning

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi I am trying to create simple application that would be able to search people on facebook using given e-mail. I am already able to log into an account using the HTMLunit tool and even create a page, which should throw result of my search. But when I try to print the result as XML the file is missing… >>> More
$this->headLink() includes duplicated script

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, Just like I did before, I used the following code for my new project. <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/button.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/inputText.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/fancyTable… >>> More
How much multiple style sheets slow down to website?

as seen on Stack Overflow - Search for 'Stack Overflow'
Here is 3 css file (one is only for IE) <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie… >>> More
mod_pagespeed is rewriting but not combining

as seen on Stack Overflow - Search for 'Stack Overflow'
I have the following problem. I installed mod_pagespeed but i am not getting the results i want! It does rewrite my css and changes the to the cache url but its not combining the css files. I have seached the web and stackoverflow for it but did not find a solution. Here are the tags <link… >>> More
CSS import or multiple CSS files

as seen on Stack Overflow - Search for 'Stack Overflow'
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes. I have created a test page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional… >>> More

Related posts about css-font-size

Store CSS font-size/line-height in Sass variable

as seen on Stack Overflow - Search for 'Stack Overflow'
Is there a way to store the font-size/line-height in a Sass variable like this: $font-normal: 14px/21px; Using this declaration I get a division as described in the documentation. Is there a way to avoid the division? Note: I use the scss syntax. >>> More
CSS font-size increment - proportional?

as seen on Stack Overflow - Search for 'Stack Overflow'
Hello. I have several elements with already set fonts - like <div style="font-size: 10px"> some text </div> <div style="font-size: 20p"> some text </div> I want to increment the font size proprtionally, eg <div style="font-size: 15px"> ...… >>> More
CSS font-size causing the last line to be too high

as seen on Stack Overflow - Search for 'Stack Overflow'
OK, I have a list (<ul>) then inside each <li> element I have an <a...> Here are all the applicable CSS items to the <a> tag .search_area li a { font-size:11px; } sResCntr li { list-style-type:none; } body { font-family:Arial; } Everything looked great, until I put… >>> More
change font-size of nested elements in list

as seen on Stack Overflow - Search for 'Stack Overflow'
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… >>> More
Resizing text in an HTML 5 page using JQuery

as seen on ASP.net Weblogs - Search for 'ASP.net Weblogs'
This is going to be the ninth post in a series of posts regarding HTML 5. You can find the other posts here, here , here , here, here , here , here and here.In this post I will demonstrate how to implement a very common feature found in websites today… >>> More