Intermediate LevelCSS & Modern Layouts
How do CSS counters create complex automatic numbering systems?
❓ Interview Prompt: Explain nested counters, counter-reset scope, and multi-level document outline numbering.
CSS counters enable automatic numbering without JavaScript:
Properties:
•
counter-reset: name — creates/resets a counter (scoped to the element).•
counter-increment: name — increments the counter.•
counter(name) — outputs the current value.•
counters(name, separator) — outputs nested counter values joined by a separator.Nested Counters:
When counter-reset is declared on nested elements, each level gets its own counter instance, enabling multi-level numbering like "1.1", "1.2", "2.1".
Code Implementation Example
css
/* Multi-level document outline numbering */
.toc { counter-reset: chapter; }
.toc h2 { counter-increment: chapter; counter-reset: section; }
.toc h2::before { content: counter(chapter) ". "; }
.toc h3 { counter-increment: section; }
.toc h3::before { content: counter(chapter) "." counter(section) " "; }💡Multi-level document outline using nested CSS counters.
🎯 Interview Key Takeaway
CSS counters create automatic multi-level numbering (1.1, 1.2, 2.1) without JavaScript.
#Counters#Numbering#Typography#Intermediate
Back to all CSS & Modern Layouts Questions→