CSS3 counter hierarchie

dabblet.css

/**
 * CSS3 counter hierarchie
 */
 
@import url(http://fonts.googleapis.com/css?family=Spicy+Rice);

div{

}

body{
font-family: 'Helvetica',sans-serif, 'Spicy Rice', cursive;
letter-spacing:.1em;
counter-reset: titre1 0 titre2 0;
}


h1{

counter-increment:titre1;
counter-reset:titre2;

}
h1::before{
content:counter(titre1)') ';
color: darkorchid;
}

h2{
counter-increment:titre2;
}

h2::before{
content:counter(titre1)"."counter(titre2)' - ';
color: orchid;
}



@counter-style sh1 {
	type:repeating;
	glyphs:'♔';
	suffix: '';
}

#demo2 {
font:2em sans-serif;
}
ul {
	counter-reset:item;
	list-style-type:none;
}
ul li::before{
	counter-increment:item;
	content:counters(item,".")' ';	
	color:orchid;
}

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>Mammifères
        <ul>
            <li>Aquatiques
<ul>                    <li>Ornithorynque</li>
                    <li>Desman</li>
             </ul>
             </li>
            <li>Terrestres
                <ul>
                    <li>Pangolin</li>
                    <li>Echidné</li>
                </ul>
            </li>
       </ul>
    </li>
    <li>Oiseaux
        <ul><li>Volants
	<ul><li>Colibri</li></ul>
       </li>
        <li>Terrestres
          <ul>
            <li>Kiwi</li>
            <li>Emeux</li>
            <li>Casoar</li>
           </ul>
        </li>
       </ul>
    </li>
    <li>Poissons
      <ul>
         <li>Blobfish</li>
         <li>Goliath Tigerfish</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>


<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>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"html"}