CSS3 counter hierarchie

dabblet.css

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

div{
width:200px;
columns:200px 2;

}

body{
font-family: 'Spicy Rice', cursive;
background:#888;
letter-spacing:.1em;
counter-reset: titre1 0 titre2 0;
}


h1{
font-weight:normal;
color: #cc5;
text-shadow:1px 1px 5px #000;
counter-increment:titre1;
counter-reset:titre2;
content:counter(titre1)')';
}
h1::before{
content:counter(titre1)')';
}

h2{
font-weight:normal;
color:#f43;
text-shadow:1px 1px 5px #000;
counter-increment:titre2;

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

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

}

dabblet.html

<div>
<ul>
<li>a</li><li>b</li><li>c</li><li>d</li><li>e</li><li>f</li>
</ul>
</div>
<div>
<dl>
<dt>A</dt><dd>a</dd><dd>à</dd>
<dt>E</dt><dd>e</dd><dd>é</dd>
<dt>I</dt><dd>i</dd><dd>ï</dd>
<dt>O</dt><dd>o</dd><dd>ô</dd>
</dl>
</div>


<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>
<h2>Titre 2.3</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"}