#1
  1. No Profile Picture
    tom_cos
    Guest
    Devshed Newbie (0 - 499 posts)

    Styling Nested Ordered Lists


    Hello,

    I have a list of items:

    Code:
    I. (a)
       (b)
       (c)
    II. (a)
        (b)
    etc.

    This is easy to render using a table; but is it possible to use CSS to set this sort of styling??

    Here is some code I've gotten which was rendering 0. (a) at one point; but now it seems to produce

    Code:
    1.
        1.item
        2.item
        3.item
    2.
        1.item
        2.item
        3.item
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
      <title> New Document </title>
    <style type="text/css">
    @counter-style upper-roman {
    	system: additive;
    	range: 1 4999;
    	additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I;
    }
    @counter-style lower-alpha {
    	system: alphabetic;
    	symbols: a b c d e f g h i j k l m n o p q r s t u v w x y z;
    }
    @counter-style section1 {counter-reset: section1; range: 1 999;}
    @counter-style section2 {font-style: italic; range: 1 999;}
    ol.li1:before        { content:counter(section1, upper-roman) "." }
    ol.li2:before        { content: counter(section2, lower-alpha) " (" }
    ol.li2:after         { content: ") " }
    </style>
     </head>
    
     <body>
    
    <ol>
     <li class="li1">
     <ol>
      <li class="li2">item</li>
      <li class="li2">item</li>
      <li class="li2">item</li>
     </ol>
     </li>
     <li class="li1">
     <ol>
      <li class="li2">item</li>
      <li class="li2">item</li>
      <li class="li2">item</li>
     </ol>
     </li>
    </ol>
    
     </body>
    </html>
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    As far as I know, "@counter-style" has not been implemented in any browser yet. You don't need it for this anyway.

    Also your selectors seem to not match any elements -- the classes are applied to the list-items, not the lists.

    Try these styles:
    Code:
    ol {
    	counter-reset: section1;
    }
    .li1>ol {
    	counter-reset: section2;
    }
    .li1,.li2 {
    	list-style-type: none;
    }
    .li1 {
    	counter-increment: section1;
    }
    .li2 {
    	counter-increment: section2;
    }
    ol .li1:before        { content:counter(section1, upper-roman) "." }
    ol .li2:before        { content: counter(section2, lower-alpha) " (" }
    ol .li2:after         { content: ") " }

    Comments on this post

    • agrees
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    tom_cos
    Guest
    Devshed Newbie (0 - 499 posts)
    Originally Posted by Kravvitz
    As far as I know, "@counter-style" has not been implemented in any browser yet. You don't need it for this anyway.
    Code:
    ol {
    	counter-reset: section1;
    }
    .li1>ol {
    	counter-reset: section2;
    }
    .li1,.li2 {
    	list-style-type: none;
    }
    .li1 {
    	counter-increment: section1;
    }
    .li2 {
    	counter-increment: section2;
    }
    ol .li1:before   { content:counter(section1, upper-roman) "." }
    ol .li2:before   { font-style: italic; content:  " (" counter(section2, lower-alpha) ") " }
    ol .li2          { text-indent:-2.5em; margin-left: 2.5em; margin-bottom: 0.25em;}
    Gives me 90% of what I want!

    Thanks Kravvitz

IMN logo majestic logo threadwatch logo seochat tools logo