CSS3 counter hierarchie

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,".")' ';
}

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>

settings.json

{"view":"split","prefixfree":"1","page":"css"}