Skip to content

Instantly share code, notes, and snippets.

@orioltf

orioltf/dabblet.css

Last active October 5, 2015 00:37
Show Gist options
  • Save orioltf/2724638 to your computer and use it in GitHub Desktop.
Save orioltf/2724638 to your computer and use it in GitHub Desktop.
Download ZIP
List with incremental numbering
Raw
dabblet.css
/**
* List with incremental numbering
*/
nav ol {
list-style: none;
counter-reset: olfirst; /* our father OL must have olfirst item reseted */
}
nav ol ol {
counter-reset: olsecond; /* our sub OL's reset the olsecond, third must to be olthird and so on */
}
nav ol ol ol {
counter-reset: olthird; /* our sub OL's reset the olsecond, third must to be olthird and so on */
padding: 0 0 0 2.5em;
}
nav > ol > li {
counter-increment: olfirst; /* when we have a item that is children of first OL, it increases first counter*/
}
nav > ol > li ol > li {
counter-increment: olsecond; /* when the item is children of a OL that is children of another OL, so it is a sub OL */
}
nav > ol > li ol > li ol > li {
counter-increment: olthird; /* when the item is children of a OL that is children of another OL, so it is a sub OL */
}
nav > ol > li:before {
content: counter(olfirst) " - "; /* let's output our pretty number */
}
nav > ol > li ol > li:before {
content: counter(olfirst) "." counter(olsecond) " - "; /* let's output our "sub-number" */
}
nav > ol > li ol > li ol > li:before {
content: counter(olfirst) "." counter(olsecond) "." counter(olthird) " - "; /* let's output our "sub-number" */
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<nav><ol>
<li>
<a>Menu Level 1</a>
<ol>
<li>
<a>Menu level 1.1</a>
<ol>
<li><a>Menu level 1.1.1</a></li>
<li><a>Menu level 1.1.2</a></li>
<li><a>Menu level 1.1.3</a></li>
<li><a>Menu level 1.1.4</a></li>
</ol>
</li>
<li><a>Menu level 1.2</a></li>
<li>
<a>Menu level 1.3</a>
<ol>
<li><a>Menu level 1.3.1</a></li>
<li><a>Menu level 1.3.2</a></li>
<li><a>Menu level 1.3.3</a></li>
</ol>
</li>
</ol>
</li>
<li><a>Menu Level 2</a></li>
<li>
<a>Menu Level 3</a>
<ol>
<li><a>Menu Level 3.1</a></li>
<li>
<a>Menu Level 3.2</a>
<ol>
<li><a>Menu Level 3.2.1</a></li>
<li><a>Menu Level 3.2.2</a></li>
</ol>
</li>
</ol>
</li>
</ol></nav>
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment