Skip to content

Instantly share code, notes, and snippets.

@kuroshio

kuroshio/nested-counter-nojs.html

Last active May 15, 2018 03:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kuroshio/a661e6539e11ec06cdd7bba78253253f to your computer and use it in GitHub Desktop.
Save kuroshio/a661e6539e11ec06cdd7bba78253253f to your computer and use it in GitHub Desktop.
Download ZIP
HTML & CSS-only example of hierarchical nested counters using ordered lists. No JavaScript required. Supports different color for counter and proper indentation for multi-line bullet content.
Raw
nested-counter-nojs.html
<!doctype html>
<html lang="en">
<head>
<title>Nested Counters Example</title>
<style>
ol {
counter-reset: section;
}
ol > li {
display: table;
counter-increment: section;
}
ol > li:before {
color: #76b900;
content: counters(section, ".") ".0";
display: table-cell;
padding-right: 10px;
}
ol li ol > li:before {
content: counters(section, ".");
}
ol .lower-roman,
ol .upper-roman,
ol .lower-alpha,
ol .upper-alpha {
counter-reset: styledSection;
}
ol .lower-roman > li,
ol .upper-roman > li,
ol .lower-alpha > li,
ol .upper-alpha > li {
counter-increment: styledSection;
}
ol .lower-roman > li:before {
content: counters(styledSection, ".", lower-roman);
}
ol .upper-roman > li:before {
content: counters(styledSection, ".", upper-roman);
}
ol .lower-alpha > li:before {
content: counters(styledSection, ".", lower-alpha);
}
ol .upper-alpha > li:before {
content: counters(styledSection, ".", upper-alpha);
}
</style>
</head>
<body>
<h1>Nested Counters Example</h1>
<p>HTML &amp; CSS-only example of hierarchical nested counters using ordered lists. Supports different counting styles using standard HTML list-styles and does not require any JavaScript. Refer to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type">MDN list-style-type CSS property</a>.</p>
<ol>
<li>Level 1 list item
<ol>
<li>Level 2 list item</li>
<li>Level 2 list item</li>
</ol>
</li>
<li>Level 1 list item
<ol class="lower-roman">
<li>Level 2 list item</li>
<li>Level 2 list item
<ol class="lower-roman">
<li>Level 3 list item</li>
<li>Level 3 list item</li>
<li>Level 3 list item</li>
</ol>
</li>
<li>Level 2 list item
<ol class="upper-roman">
<li>Level 3 list item</li>
<li>Level 3 list item</li>
<li>Level 3 list item</li>
</ol>
</li>
</ol>
</li>
<li>Level 1 list item
<ol>
<li>Level 2 list item
<ol class="upper-alpha">
<li>Level 3 list item</li>
<li>Level 3 list item</li>
<li>Level 3 list item
<ol class="upper-alpha">
<li>Level 4 list item</li>
<li>Level 4 list item</li>
<li>Level 4 list item</li>
</ol>
</li>
</ol>
</li>
<li>Level 2 list item
<ol class="lower-alpha">
<li>Level 3 list item</li>
<li>Level 3 list item
<ol class="lower-alpha">
<li>Level 4 list item</li>
<li>Level 4 list item</li>
<li>Level 4 list item</li>
</ol>
</li>
<li>Level 3 list item</li>
</ol>
</li>
</ol>
</li>
<li>Level 1 list item
<br>
<span>There is no list for this item</span>
</li>
</ol>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment