Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set the content as a counter?
In general, we use JavaScript to set the dynamic content as counter for the content on the web page. But in this article, we are going to learn how we can set the content as counter using the CSS counter properties. It is possible to set content as counter by using the counter properties inside the before or after pseudo selectors.
Let us now see the counter properties we can use to set the content as counter using CSS.
The CSS counters are just like the variables in other languages. We can increment their values using CSS rules or properties. Let us see how to create, increment and set the content as counter using below properties.
counter-reset − This CSS property will create or reset the counter.
counter-increment − We can use this CSS property to increment the counter value.
content − This is the property that used inside the pseudo selectors to set the content before or after an element.
counter() method − The counter() method will add the value of the counter to an content component.
Syntax
The below syntax will show you how you can use all these properties together to set the content as counter using CSS −
parent-element selector {
counter-reset: name; // It will create or reset the CSS counter with the given name
}
child-element :: before / after {
counter-increment: name; // increment the counter with the given name
content: counter(name); // It will set the content as counter
}
Let us now understand the above properties in details by practically implementing them with the help of code examples.
Steps
Step 1 − In the first step, we will add a parent div container with a class in the HTML document that contains all the nested div containers.
Step 2 − In the next step, we will create the inner div containers or the child containers of the div element created in last step.
Step 3 − In the final step, we will use the above properties in the same syntax with the parent and the child element as shown above.
Example
The below example will explain you how you can set the content as counter to any element using the above CSS properties in the specified syntax −
<!DOCTYPE html>
<html>
<head>
<style>
.outer-div{
border: 2px solid red;
counter-reset: myDivs;
}
.inner-div{
border: 1px solid green;
margin: 5px;
padding: 5px;
}
.inner-div::after{
counter-increment: myDivs;
content: counter(myDivs);
}
</style>
</head>
<body>
<center>
<h2>Set the content as a counter</h2>
<p>The numbering to below content is set using the content as counter with CSS.</p>
<div class = "outer-div">
This is main outer div container.
<div class = "inner-div"> This is inner div No. </div>
<div class = "inner-div"> This is inner div No. </div>
<div class = "inner-div"> This is inner div No. </div>
<div class = "inner-div"> This is inner div No. </div>
<div class = "inner-div"> This is inner div No. </div>
</div>
</center>
</body>
</html>
In this example, we have set the content as the counter to the direct children of the main container. We have created a counter using the counter-reset property and then increment and set it as the content using the counter-increment and the content property respectively.
Let us see another code example in which we will set the content as the counter to the children of the inner nested divs as well.
The approach of this example is almost similar to the algorithm of the previous example. You just need to add some more child elements inside the elements with the inner-div class and start a new counter for them and set that as content for those child elements.
Example
The below example will illustrate the above algorithm and changes in the previous example to set counter to the nested div elements −
<!DOCTYPE html>
<html lang = "en">
<head>
<style>
.outer-div{
border: 2px solid red;
counter-reset: myDivs;
}
.inner-div{
border: 1px solid green;
counter-reset: innermostDivs;
margin: 5px;
padding: 5px;
}
.inner-div::before{
counter-increment: myDivs;
content: counter(myDivs) ".";
}
.innermost-div::after{
counter-increment: innermostDivs;
content: counter(innermostDivs);
}
</style>
</head>
<body>
<center>
<h2>Set the content as a counter</h2>
<p>The numbering to below content is set using the content as counter with CSS.</p>
<div class = "outer-div">
This is main outer div container.
<div class = "inner-div"> This is the first nested inner div layer. </div>
<div class = "inner-div"> This is the first nested inner div layer. </div>
<div class = "inner-div">
This is the first nested inner div layer.
<div class = "innermost-div"> This is innermost div No. </div>
<div class = "innermost-div"> This is innermost div No. </div>
<div class = "innermost-div"> This is innermost div No. </div>
</div>
<div class = "inner-div"> This is the first nested inner div layer. </div>
<div class = "inner-div">
This is the first nested inner div layer.
<div class = "innermost-div"> This is innermost div No. </div>
<div class = "innermost-div"> This is innermost div No. </div>
<div class = "innermost-div"> This is innermost div No. </div>
</div>
</div>
</center>
</body>
</html>
In the above example, we set the content as the counter to the direct children of the main container as well as the children of those children using two different counters and set the numbers before and after each one of them.
Conclusion
In this article, we have learned about setting the content as the counter using the different CSS properties and understand them in details with help of different code examples. We have discussed and understand this approach with help of two different code examples. In the former one, we have set the numbers after the direct children of the main container. While, in the later one, we set the content as counter to the children of the main container and their children as well using the same approach.
41 Views
