CSS COUNTERS
- CSS counters are like "variables". The variable values can be incremented by CSS rules (which will track how many times they are used).
There are four types of css counters properties:
- Counter reset- Creates or resets a counter
- Counter increment - Increments a counter value
- Content - Inserts generated content
- Counter() or Counters()function - Adds the value of a counter to an element
Nesting Counters
- The following example creates one counter for the page (section) and one counter for each <h1> element (subsection).
- The "section" counter will be counted for each <h1> element with "Section <value of the section counter>.", and the "subsection" counter will be counted for each <h2> element with "<value of the section counter>.<value of the subsection counter>":
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<style>
body
<html>
<head>
<style>
body
{
counter-reset: section;
}
h2::before
counter-reset: section;
}
h2::before
{
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Using CSS Counters</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Python Tutorial</h2>
<h2>SQL Tutorial</h2>
</body>
</html>
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Using CSS Counters</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Python Tutorial</h2>
<h2>SQL Tutorial</h2>
</body>
</html>
OUTPUT:
