Skip to content

Instantly share code, notes, and snippets.

@cedricici

cedricici/dabblet.css

Created January 25, 2012 21:47
Show Gist options
  • Save cedricici/1679000 to your computer and use it in GitHub Desktop.
Save cedricici/1679000 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 counter hierarchie
Raw
dabblet.css
/**
* CSS3 counter hierarchie
*/
/*@import url(http://fonts.googleapis.com/css?family=Spicy+Rice);*/
div{
}
body{
font-family:sans-serif, 'Spicy Rice', cursive;
background:#888;
letter-spacing:.1em;
counter-reset: titre1 0 titre2 0;
}
h1{
counter-increment:titre1;
counter-reset:titre2;;
}
h1::before{
content:counter(titre1)') ';
}
h2{
counter-increment:titre2;
}
h2::before{
content:counter(titre1)'.'counter(titre2)' - ';
}
@counter-style sh1 {
type:repeating;
glyphs:'♔';
suffix: '';
}
#demo2 {
font-family:sans-serif;
}
ul {
counter-reset:item;
list-style-type:none;
}
ul li::before{
counter-increment:item;
content:counters(item,".")' ';
}
Raw
dabblet.html
<div>
<ol>
<li>a</li><li>b</li><li>c</li><li>d</li><li>e</li><li>f</li>
</ol>
</div>
<hr/>
<div id="demo2">
<ul>
<li>A<ul><li>A</li><li>a<ul><li>à</li><li>â</li></ul></li></ul></li>
<li>E<ul><li>E</li><li>e<ul><li>é<ul><li>ë</li></ul></li><li>ê</li></ul></li></ul></li>
<li>I<ul><li>I</li><li>i<ul><li>ï</li><li>î</li></ul></li></ul></li>
<li>O<ul><li>O</li><li>o<ul><li>ô</li><li>ö</li></ul></li></ul></li>
</ul>
</div>
<hr/>
<h1>Titre 1</h1>
<h2>Titre 1.1</h2>
<h2>Titre 1.2</h2>
<h2>Titre 1.3</h2>
<h1>Titre 2</h1>
<h2>Titre 2.1</h2>
<h2>Titre 2.2</h2>
<h1>Titre 3</h1>
<h1>Titre 4</h1>
<h2>Titre 4.1</h2>
<h2>Titre 4.2</h2>
<h2>Titre 4.3</h2>
Raw
settings.json
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment