CSS Counter

Next ❯CSS Combinators

Similar to variables, maintained by css whose values can be incremented by css rules to track how many times they are used

  • turned_in_notCounter Properties
    • content
    • counter-increment
    • counter-reset
PropertiesDescription
contentUsed with the : :before and : :after to insert generated content
counter-incrementUsed to increment the counter value
counter-resetUsed to create or reset a counter
  • counter() or counters() function - Adds the value of a counter to an element
  • Must declare counter-reset property before using counter
Topic 1: CSS
Topic 2: HTML5
Topic 3: HTML
Topic 4: Jquery
Countersubject
Counterclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
body {  
  counter-reset: section;  
}  
h5::before {  
  counter-increment: section;  
  content: "Topic " counter(section) ": ";  
}  
</style>
</head>
<body>
  <h5>CSS</h5>
  <h5>HTML5</h5>
  <h5>HTML</h5>
  <h5>Jquery</h5>
</body>
</html>
Counter CSS
body {  
  counter-reset: section;  
}  
h5::before {  
  counter-increment: section;  
  content: "Topic " counter(section) ": ";  
}

This example counts every <h5> elements it founds

Main Topic:
Sub Topic
Sub Topic
Sub Topic
Main Topic:
Sub Topic
Sub Topic
Sub Topic
Nesting Countersubject
Nesting Counterclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<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>
  <h5 class="h1">Main Topic:</h5>
  <h5 class="h2">Sub Topic</h5>
  <h5 class="h2">Sub Topic</h5>
  <h5 class="h2">Sub Topic</h5>
  <h5 class="h1">Main Topic:</h5>
  <h5 class="h2">Sub Topic</h5>
  <h5 class="h2">Sub Topic</h5>
  <h5 class="h2">Sub Topic</h5>
</body>
</html>
Nesting Counter CSS
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) " ";
}

This example counts every h1 class & h2 class elements it founds

  1. Main Topic
  2. Main Topic
    1. Sub Topic
    2. Sub Topic
      1. Sub Sub-Topic
      2. Sub Sub-Topic
      3. Sub Sub-Topic
    3. Sub Topic
  3. Main Topic
  4. Main Topic
Nesting Counterssubject
Nesting Countersclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
.ol{  
  counter-reset: section2;
  list-style-type: none;
}   
.li::before {  
  counter-increment: section2;
  content: counters(section2,".") " ";
}
</style>
</head>
<body>
  <ol class="ol">  
  <li class="li">Main Topic</li>  
  <li class="li">Main Topic
    <ol class="ol">  
      <li class="li">Sub Topic</li>  
      <li class="li">Sub Topic  
        <ol class="ol">  
          <li class="li">Sub Sub-Topic</li>  
          <li class="li">Sub Sub-Topic</li>  
          <li class="li">Sub Sub-Topic</li>  
        </ol>  
      </li>  
      <li class="li">Sub Topic</li>  
    </ol>  
  </li>  
  <li class="li">Main Topic</li>  
  <li class="li">Main Topic</li>  
</ol>
</body>
</html>
Nesting Counters CSS
.ol{  
  counter-reset: section2;
  list-style-type: none;
}   
.li::before {  
  counter-increment: section2;  
  content: counters(section2,".") " ";
}

This example counts every ol class & li class elements it founds


  • CSS Combinators
❮ Prev Vertical Align
Next ❯CSS Combinators
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯