• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Counters

← Previous Next →

🔹 What are CSS Counters?

CSS Counters are variables maintained by CSS to keep track of how many times something appears. They are commonly used to create automatic numbering for elements like headings, sections, figures, or list items — without adding extra HTML or JavaScript.

You define, increment, and display counters using special CSS properties.

🔸 Key Properties

Property Purpose
counter-reset Initializes or resets the counter
counter-increment Increases the counter’s value
content: counter() Displays the counter's current value

🔸 Basic Example: Numbering Headings

<h2>Introduction</h2>
<h2>Getting Started</h2>
<h2>Conclusion</h2>

body {
  counter-reset: section; /* initialize */
}

h2::before {
  counter-increment: section; /* increase */
  content: "Section " counter(section) ": ";
}

Output:

Section 1: Introduction
Section 2: Getting Started
Section 3: Conclusion

🔸 Nested Counters (Multi-level)

body {
  counter-reset: chapter;
}

h1 {
  counter-reset: section;
}

h1::before {
  counter-increment: chapter;
  content: "Chapter " counter(chapter) " - ";
}

h2::before {
  counter-increment: section;
  content: counter(chapter) "." counter(section) " ";
}

🔸 Changing Counter Style

CSS supports numeric, Roman, and alphabetic styles:

content: counter(chapter, upper-roman);

  • decimal (default)

  • upper-roman (I, II, III...)

  • lower-alpha (a, b, c...)

Practice Questions

✅ Write CSS for the following:

Q1. Automatically number all <h2> elements.

Q2. Create a counter that numbers list items without using <ol>.

Q3. Use Roman numerals to number sections.

Q4. Implement nested counters for chapters and sections.

Q5. Reset a counter inside each new <h1>.

Q6. Add leading zero (e.g., 01, 02) in the numbering.

Q7. Display section numbers using uppercase letters.

Q8. Customize counter style using ::before.

Q9. Apply counters to figure captions automatically.

Q10. Use multiple independent counters on the same page.

CSS Counters Quiz

Q1: Which property initializes a CSS counter?

A. counter-increment
B. counter-reset
C. content
D. display

Q2: Which property displays a counter value?

A. counter-show
B. content: counter(name);
C. display: counter();
D. value: counter;

Q3: What does counter-increment do?

A. Sets a new counter
B. Increases the counter’s value
C. Deletes the counter
D. Creates nested counters

Q4: Which pseudo-element is commonly used with counters?

A. ::before
B. ::after
C. :hover
D. :active

Q5: How to use uppercase Roman numerals in counters?

A. roman-uppercase
B. counter(name, upper-roman)
C. counter(roman)
D. format: upper-roman;

Q6: Can counters be nested?

A. No
B. Yes, using counter-reset and counter-increment
C. Only in JS
D. Only with <ol>

Q7: Which CSS property is used to reset a nested counter?

A. counter-style
B. reset()
C. counter-reset
D. display: reset

Q8: Where can you use CSS counters?

A. In any element using pseudo-elements
B. Only in ordered lists
C. Only in headings
D. Only in forms

Q9: What is the default style of counters?

A. Roman
B. Alphabetic
C. Decimal (1, 2, 3...)
D. None

Q10: Which of the following is valid syntax for displaying a counter?

A. value: counter(section);
B. content: counter(section);
C. display: counter(section)
D. text: counter(section);
← Previous Next →
Login
Go Back Top