Skip to content

Instantly share code, notes, and snippets.

@henrahmagix

henrahmagix/nested-counter-reset.html

Last active August 29, 2015 14:10
Show Gist options
  • Save henrahmagix/9d0a2d9afab82b5c569c to your computer and use it in GitHub Desktop.
Save henrahmagix/9d0a2d9afab82b5c569c to your computer and use it in GitHub Desktop.
Download ZIP
How counter-reset works through nested lists.
Raw
nested-counter-reset.html
<html>
<head>
<title>Nested counter-reset styles</title>
<style type="text/css">
ol,
ul {
list-style: none;
counter-reset: listStyle;
margin: 1em 0;
}
ul li:before,
ol li:before {
content: ".";
counter-increment: listStyle;
content: counter(listStyle, lower-alpha) ".";
}
</style>
</head>
<body>
<ul>
<li>
<ul><!-- counter-reset: listStyle -->
<li></li>
<li></li>
<li></li>
<li>
<ul><!-- counter-reset: listStyle -->
<li></li>
<li>
<ul><!-- counter-reset: listStyle -->
<li></li>
<li></li>
<li>
<ul><!-- counter-reset: listStyle -->
<li>
<ul><!-- counter-reset: listStyle -->
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
<li></li>
</ul>
<ol><!-- counter-reset: listStyle -->
<li></li>
<li></li>
<li></li>
<li>
<ol><!-- counter-reset: listStyle -->
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ul>
</body>
</html>
@henrahmagix
Copy link
Author

Result

result

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment