Page Widget How to - Count header index with counter-increment property

Question

We would like to know how to count header index with counter-increment property.

Answer


<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body {<!--  w ww .j  a  v a  2 s. com-->
  counter-reset: section;
}

h1 {
  counter-reset: category;
}

h1:before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2:before {
  counter-increment: category;
  content: counter(section) "." counter(category) " ";
}
</style>
</head>
<body>
  <h1>Tutorials</h1>
  <h2>HTML Tutorial</h2>
  <h2>CSS Tutorial</h2>
  <h1>References</h1>
  <h2>HTML Tags</h2>
  <h2>CSS Properties</h2>
  <p>
    <strong>Note:</strong> Internet Explorer 7 and earlier versions don't
    support the
    <code>counter-increment</code>
    property. IE8 supports this property only if a
    <code>&lt;!DOCTYPE&gt;</code>
    is specified.
  </p>
</body>
</html>

The code above is rendered as follows: