3

May I know is it possible to create something like this : 

1. Food
   1.1 Vege
       a. Carrot
          i. White Carrot
          ii. Red Carrot
   1.2 Meat
       a. Chicken
       b. beef
2. Beverages

I've seen many solution for mixed list with numbers and alphabets, but I can't make something like this which include number,nested number, alphabet, roman characters using simpler css code.

Refer to the solution on jsFiddle for this question, it only able to create nested number, but without alphabet and roman characters.

Below is what I did (to fake the effect) :

.primary {
  list-style-type: none;
  counter-reset: item;
  margin: 0px;
  padding: 0px;

}

/* Direct child under ol */
.primary>li {
  counter-increment: item;

}

/* Before direct child under ol */
.primary>li:before {
    content: counters(item, ".") ". ";
    padding-right: 0.6em;    

}

.primary>li li {
    margin: 0px;

}

/* Before li of second level ol */
.primary>li li:before {
    content: counters(item, ".") " ";

}

/* Third level ol */
.pri-inner {
    list-style-type: lower-alpha;
    padding-left:20px;
}

/* Hide the counter content on third level */
.pri-inner li:before {
    content:none;
    display:none;
}

/* Fourth level ol */
.pri-inner2{
    list-style-type: lower-roman;
    padding-left:25px;
}

The sample html code look like this 

<ol class="primary">
  <li>First
    <ol class="primary">
      <li>Inside First</li>
      <li>
        <ol class="pri-inner">
          <li>Inside inside
            <ol class="pri-inner2">
              <li>Maximum inside</li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Second</li>
</ol>

So, is there any better way to achieve that? Because I have to hide the counter on 3rd level.

Community
  • 1
  • 1
Chiew Carol
  • 33
  • 3

1 Answers1

4

counter() accepts a second parameter for the list type, i.e. counter(item, lower-alpha)

So the following CSS could do it, or could be tweaked to use your class names.

ol {
    list-style-type: none;
    counter-reset: item;
    margin: 0;
    padding: 0;
}

li {
    display: table;
    counter-increment: item;
    margin-bottom: 0.6em;
}

li:before {
    content: counters(item, ".") ". ";
    display: table-cell;
    padding-right: 0.6em;    
}

li li {
    margin: 0;
}

li li:before {
    content: counters(item, ".") " ";
}

li li li:before {
    content: counter(item, lower-alpha) ". ";
}

li li li li:before {
    content: counter(item, lower-roman) ". ";
}

http://jsfiddle.net/eke4afd8/

Collin Grady
  • 2,226
  • 1
  • 14
  • 14
  • 1
    Thanks so much !! It works like a charm through a little bit customization to my code ^_^ By the way, it's my very first time asking a question here. – Chiew Carol Apr 15 '15 at 08:52