Class 6 Exam  >  Class 6 Notes  >  CSS for Beginners  >  CSS Counters

CSS Counters | CSS for Beginners - Class 6 PDF Download

Automatic Numbering With Counters


CSS counters are like "variables". The variable values can be incremented by CSS rules (which will track how many times they are used).
To work with CSS counters we will use the following 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

To use a CSS counter, it must first be created with counter-reset.
The following example creates a counter for the page (in the body selector), then increments the counter value for each <h2> element and adds "Section <value of the counter>:" to the beginning of each <h2> element:
Example

body {

  counter-reset: section;

}


h2::before {

  counter-increment: section;

  content: "Section " counter(section) ": ";

}

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

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) " ";

}

A counter can also be useful to make outlined lists because a new instance of a counter is automatically created in child elements. Here we use the counters() function to insert a string between different levels of nested counters:
Example

ol {

  counter-reset: section;

  list-style-type: none;

}


li::before {

  counter-increment: section;

  content: counters(section,".") " ";

}

CSS Counter Properties


CSS Counters | CSS for Beginners - Class 6 

The document CSS Counters | CSS for Beginners - Class 6 is a part of the Class 6 Course CSS for Beginners.
All you need of Class 6 at this link: Class 6
10 videos|41 docs|23 tests

Top Courses for Class 6

10 videos|41 docs|23 tests
Download as PDF
Explore Courses for Class 6 exam

Top Courses for Class 6

Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
10M+ students study on EduRev
Related Searches

pdf

,

study material

,

practice quizzes

,

shortcuts and tricks

,

MCQs

,

Sample Paper

,

CSS Counters | CSS for Beginners - Class 6

,

mock tests for examination

,

Extra Questions

,

Exam

,

Free

,

past year papers

,

ppt

,

Summary

,

CSS Counters | CSS for Beginners - Class 6

,

Semester Notes

,

Previous Year Questions with Solutions

,

video lectures

,

Objective type Questions

,

CSS Counters | CSS for Beginners - Class 6

,

Viva Questions

,

Important questions

;