Counter increment : counter increment « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. counter increment

Counter increment

 

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
  <title>CSS Counters</title>
<style type='text/css'>
body {counter-reset: chapter; counter-reset: section; }

h1:before {content: "Chapter " counter(chapter) ": "; }
h1 {counter-increment: chapter; counter-reset: section;}

h2:before { content: counter(chapter) "." counter(section) " "; }
h2 {counter-increment: section; }
</style>

</head>

<body>
<h1> Introducing Web Technologies</h1>
  <h2>Introducing HTML</h2>
  <h2>Introducing CSS</h2>
  <h2>Introducing XHTML</h2>
<h1> Structure of Documents</h1>
  <h2>Text</h2>
  <h2>Lists</h2>
  <h2>Tables</h2>
  <h2>Forms</h2>
</body>
</html>








Related examples in the same category

1.counter-increment: paragraphNumber
2.LI counter-increment
3.List counter-increment: item
4.List counter-reset: item
5.Counter format