Nested Ordered Lists with Continued Numbering Using Multiple Classes in CSS

I am working in WordPress and have an existing default css style set for my ol and li that I can not change.

I need to create a 3-level ordered list (styled) using classes and can’t figure out how to continue the numbering from class to class.

I figured out a work around. I created 6 different classes and set the counter-reset to the number I wanted to continue with, however I know this is not the correct way of doing it and if I was to modify the list the numbering would not adjust itself. Also, the list-style-position would not work so I had to fiddle with the padding, margin and text-indent to get it to line up properly.

I created a jsfiddle to show my example. I deliberately left a level out of the 1st level to show what it is doing. I have watched and read several tutorials to get me to this point, but now I am stuck. Help would be greatly appreciated, thank you!

My CSS

ol.myList {
counter-reset: list;
text-align:justify;
margin-left: 35px;   
padding-left: 30px;
text-indent: -3em;

}
ol.myList > li {
list-style: none;
margin-left: 0;
padding-left: 0;
margin-bottom: 20px; 
}

ol.myList > li:before {
counter-increment: list;
content:"(" counter(list, lower-alpha) ")"; padding-right: 1em;
margin-left: 1em;
}

ol.terms{
counter-reset: list;
text-align:justify;
margin-left: 35px;
padding-left: 0;
text-indent: -2em;
}

ol.terms > li {
list-style: none;
margin-left: 0;
padding-left: 0;
margin-bottom: 20px; 
}

ol.terms li:before {
content: counter(list) "."; padding-right: 1em;
counter-increment: list;
font-weight: bold;
}

ol.terms-cont{
counter-reset: list 8;
text-align:justify;
margin-left: 35px;
padding-left: 0;
text-indent: -2em;
}

ol.terms-cont > li {
list-style: none;
margin-left: 0;
padding-left: 0;
margin-bottom: 20px; 
}

ol.terms-cont li:before {
content: counter(list) "."; padding-right: 1em;
counter-increment: list; 
font-weight: bold;
}

ol.terms-roman {
counter-reset: list;
text-align:justify;
margin-left: 35px;   
padding-left: 65px;
text-indent: -3em;
}

ol.terms-roman > li {
list-style: none;
margin-left: 0;
padding-left: 0;
margin-bottom: 20px; 
}

ol.terms-roman > li:before {
counter-increment: list;
content:"(" counter(list, lower-roman) ")"; padding-right: 1em;
margin-left: 1em;
}

ol.myList-cont {
counter-reset: list 5;
text-align:justify;
margin-left: 35px;   
padding-left: 30px;
text-indent: -3em;
}

ol.myList-cont > li {
list-style: none;
margin-left: 0;
padding-left: 0;
margin-bottom: 20px; 
}

ol.myList-cont > li:before {
content:"(" counter(list, lower-alpha) ")"; padding-right: 1em;
counter-increment: list;
margin-left: 1em;
}

ol.terms-cont-1{
counter-reset: list continue;
text-align:justify;
margin-left: 35px;
padding-left: 0;
text-indent: -2.25em;
}

ol.terms-cont-1 > li {
list-style: none;
margin-left: 0;
padding-left: 0;
margin-bottom: 20px; 
}

ol.terms-cont-1 li:before {
content: counter(list) "."; padding-right: 1em;
counter-increment: list; 
font-weight: bold;
}

Read more here: Nested Ordered Lists with Continued Numbering Using Multiple Classes in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *