Numbering headlines with CSS-counter

For more details see the German article of Vladimir Simovic: http://www.perun.net/2011/12/07/css-automatische-nummerierung-von-ueberschriften/

HTML

<h1>Name of the book</h1>
<h2>Chapter</h2>
<h3>Section</h3>
<h3>Section</h3>
<h2>Chapter</h2>
<stop>hu</stop>
<h1>Julian</h1>

<p>An example with text can be found <a href="http://jsfiddle.net/Flocke/WPx2c/" target="_blank">here</a>!</p>

CSS

body {counter-reset: level1;}

h1:before {
    content: counter(level1) " ";
    counter-increment: level1;}
h1 {counter-reset: level2;}

h2:before {
    content: counter(level1) "." counter(level2) " ";
    counter-increment: level2;}
h2 {counter-reset: level3;}

h3:before {
    content: counter(level1) "." counter(level2) "." counter(level3) " ";
    counter-increment: level3;}
    
stop { counter-reset: level1;}    

body { padding: 40px;}
h1, h2, h3 { margin: 0 0 10px 0; border-bottom: 1px dotted #666;}
h2 {margin-left: 10px;}
h3 {margin-left: 20px;}

p { padding: 10px; background-color: #eee;border: 1px solid black; margin: 30px 0 10px 0;}
a {color: #a20000;}

JavaScript

// For more details see the German article of Vladimir Simovic:
//http://www.perun.net/2011/12/07/css-automatische-nummerierung-von-ueberschriften/

// works in all real browsers and in IE starting with version 8

// An example with text can be found here:
// http://jsfiddle.net/Flocke/WPx2c/