CSS Counters

CSS counters are similar to variables. These are maintained by CSS and those values can be incremented by CSS rules to track how many times they are used.

CSS counters facilitate simple CSS based incrementing and display of a number for generated content.

CSS Counter Properties

Following is a list of properties that are used with CSS counter:

counter-reset: It is used to create or reset a counter.
counter-increment: It is used to increment the counter value.
content: It is used to insert generated content.
counter() or counters() function: It is used to add the value of a counter to an element.

Note: Before using a CSS counter, it must be created with counter-reset.

CSS Counter Example

Let's take an example to create a counter for a page and increment the counter value for each next element.

See this example:

<!DOCTYPE html>
<html>	
<head>
<style>
body {
    counter-reset: section;
}
h2::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Example of CSS Counters:</h1>
<h2>Java Tutorial</h2>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>Oracle Tutorial</h2>
<p><strong>Note:</strong> IE8 supports these properties only if a !DOCTYPE is specified.</p>
</body>
</html>

Test it Now

Note: In the above example you can see that a counter is created for the page in the body selector and it increments the counter value for each <h2> element and adds "Section <value of the counter>:" to the beginning of each <h2> element.

CSS Nesting Counters

You can also create counters within the counter. It is called nesting of a counter. Let's take an example to demonstrate nesting counter.

See this 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>Java tutorials:</h1>
<h2>Core Java tutorial</h2>
<h2>Servlet tutorial</h2>
<h2>JSP tutorial</h2>
<h2>Spring tutorial</h2>
<h2>Hibernate tutorial</h2>

<h1>Web technology tutorials:</h1>
<h2>HTML tutorial</h2>
<h2>CSS tutorial</h2>
<h2>jQuery tutorial</h2>
<h2>Bootstrap tutorial</h2>

<h1>Database tutorials:</h1>
<h2>SQL tutorial</h2>
<h2>MySQL tutorial</h2>
<h2>PL/SQL tutorial</h2>
<h2>Oracle tutorial</h2>
<p><strong>Note:</strong> IE8 supports these properties only if a !DOCTYPE is specified.</p>
</body>
</html>

Test it Now

Note: In the above example you can see that a counter is created for the section and another nesting counter named subsection is created within section.

Different level of nesting counters

You can create outlined lists by using nesting counters. It facilitates you to insert a string between different levels of nested counters.

See this 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>
<h2>Different level of Nesting counters</h2>
<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>
<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>
</body>
</html>

Test it Now

Next TopicCSS clearfix

← prev next →