CSS Counters Practice Questions with Solutions

By /

Introduction

CSS counters allow you to automatically number elements without manually typing numbers in HTML. They are useful for creating numbered headings, lists, chapters, sections, and step-by-step guides. CSS counters use the counter-reset, counter-increment, and counter() functions to generate dynamic numbering. In this chapter, you’ll practice CSS counters through simple solved CSS Counters practice questions that are easy for beginners to understand.

Question 1: Create a Counter

Problem Statement

Write CSS to create a counter named section.

CSS Code

body {    counter-reset: section;}

Output

A counter named section is created and initialized to 0.

Explanation

  • counter-reset creates a new counter.
  • The counter starts from 0 by default.
  • It must be created before it can be incremented.

Question 2: Increment a Counter

Problem Statement

Write CSS to increase the section counter for every <h2> element.

CSS Code

h2 {    counter-increment: section;}

Output

The section counter increases by 1 for every <h2> element.

Explanation

  • counter-increment increases the counter value.
  • Each matching element increments the counter automatically.
  • This removes the need to manually number headings.

Question 3: Display a Counter Before a Heading

Problem Statement

Write CSS to display the current section counter before every <h2> heading.

CSS Code

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

Output

Each <h2> heading displays a number before its text, such as:

1. Introduction2. Services3. Contact

Explanation

  • counter() retrieves the current counter value.
  • content displays the generated number.
  • "." adds a period after the number.

Question 4: Reset a Counter Inside a Section

Problem Statement

Write CSS to restart the subsection counter whenever a new <section> begins.

CSS Code

section {    counter-reset: subsection;}

Output

Each new <section> starts the subsection counter from 0.

Explanation

  • counter-reset restarts the counter.
  • Each section begins with fresh numbering.
  • This is useful for nested headings.

Question 5: Increment a Subsection Counter

Problem Statement

Write CSS to increase the subsection counter for every <h3> heading.

CSS Code

h3 {    counter-increment: subsection;}

Output

Each <h3> heading increases the subsection counter by 1.

Explanation

  • Every matching <h3> increments the counter.
  • It works together with counter-reset.
  • This helps organize multi-level documents.

Question 6: Display Nested Counters

Problem Statement

Write CSS to display both the section and subsection counters before every <h3> heading.

CSS Code

h3::before {    content: counter(section) "."counter(subsection) " ";}

Output

Each <h3> heading displays numbers like:

1.1 Introduction1.2 Features2.1 Services2.2 Pricing

Explanation

  • counter(section) displays the main section number.
  • counter(subsection) displays the subsection number.
  • Both counters create hierarchical numbering.

Question 7: Add Parentheses Around Counter Numbers

Problem Statement

Write CSS to display the counter number inside parentheses before every paragraph.

CSS Code

p::before {    content: "("counter(section) ") ";}

Output

Paragraphs display numbers like:

(1) Welcome(2) About Us(3) Contact

Explanation

  • The content property allows you to combine text and counters.
  • Parentheses are added before and after the counter value.
  • This creates a clean numbered format.

Question 8: Number List Items Using Counters

Problem Statement

Write CSS to display automatic numbers before every list item.

CSS Code

li::before {    content: counter(item) ". ";}

Output

Each list item displays a number, such as:

1. HTML2. CSS3. JavaScript

Explanation

  • counter(item) displays the current list counter.
  • It is commonly used with custom numbered lists.
  • The counter must be created and incremented separately.

Question 9: Display Counters in Upper Roman Format

Problem Statement

Write CSS to display the section counter using uppercase Roman numerals.

CSS Code

h2::before {    content: counter(section, upper-roman) ". ";}

Output

Headings display numbers like:

I. IntroductionII. ServicesIII. Contact

Explanation

  • upper-roman changes the counter format.
  • Numbers appear as Roman numerals.
  • This style is often used in reports and legal documents.

Question 10: Display Counters in Lower Alphabet Format

Problem Statement

Write CSS to display the section counter using lowercase letters.

CSS Code

h2::before {    content: counter(section, lower-alpha) ". ";}

Output

Headings display letters like:

a. Introductionb. Servicesc. Contact

Explanation

  • lower-alpha formats the counter as lowercase letters.
  • Alphabetic numbering is useful for subtopics and questionnaires.
  • CSS supports several numbering styles.

Key Takeaways

  • counter-reset creates or resets a counter.
  • counter-increment increases the counter value.
  • counter() displays the current counter value.
  • Counters are usually displayed with ::before.
  • Nested counters create multi-level numbering.
  • CSS supports different numbering formats such as decimal, Roman numerals, and alphabetic letters.
  • CSS counters eliminate the need for manual numbering.

Frequently Asked Questions (FAQs)

1. What are CSS counters?

CSS counters are automatic numbering tools that generate numbers for headings, lists, sections, and other HTML elements.

2. Which property creates a CSS counter?

Use:

body {    counter-reset: section;}

3. Which property increases a counter?

Use:

h2 {    counter-increment: section;}

4. How do I display a counter value?

Use the counter() function inside the content property.

Example:

h2::before {    content: counter(section);}

5. Can CSS counters create nested numbering?

Yes. Multiple counters can be combined to create numbering like 1.1, 1.2, 2.1, and 2.2.

6. Which numbering formats are supported by CSS counters?

Common formats include:

  • Decimal
  • Upper Roman
  • Lower Roman
  • Upper Alpha
  • Lower Alpha

7. Where are CSS counters commonly used?

CSS counters are commonly used for:

  • Chapters
  • Sections
  • Headings
  • Tutorials
  • Reports
  • Custom numbered lists
  • Documentation

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top