worldofitech
CSS counters are like variables. These are maintained by CSS and those values can be incremented by CSS rules to track how many time they are used.
CSS counters are “variables” maintained by CSS whose values can be augmented by CSS rules (to track how many times they are used). Counters let you adjust the appearance of content dependent on its placement in the document.
Automatic Numbering With Counters
CSS counters are like “variables”. The variable values can be augmented by CSS rules (which will track how many times they are used).
To work with CSS counters we will use the accompanying properties:
• counter-reset – Creates or resets a counter
• counter-increase – Increments a counter value
• content – Inserts generated content
• counter() or counters() function- Adds the value of a counter to an element
To use a CSS counter, it should initially be created with counter-reset.
The accompanying example creates a counter for the page (in the body selector), then, at that point, augments the counter value for each <h2> element and adds “Selection <value of the counter>: “to the beginning of each <h2> element
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
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 Programming</h2>
<h2>Java Programming</h2>
</body>
</html>
Nesting Counters
The accompanying example creates one counter for the page (segment) and one counter for each <h1> element (subsection). The “segment” 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 {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>HTML/CSS Tutorials</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>Bootstrap</h2>
<h1>Scripting Tutorials</h1>
<h2>JavaScript</h2>
<h2>jQuery</h2>
<h2>React</h2>
<h1>Programming Tutorials</h1>
<h2>Python</h2>
<h2>Java</h2>
<h2>C++</h2>
</body>
</html>
A counter can likewise be useful to make outlined lists on the grounds that another case of a counter is automatically created in child elements. Here we use the counters() function to insert a string between various levels of nested counters:
Example
<!DOCTYPE html>
<html>
<head>
<style>
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
<ol>
<li>item</li>
<li>item</li>
</ol>
</body>
</html>
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
