CSS counters track integer values through reset, increment and set rules. Counter styles format those integers as decimal digits, Roman numerals, alphabetic sequences, symbols or custom representations. A representation problem and a counter-value problem therefore require different evidence.
The central example holds the counter value at27. Decimal displays27, a three-place padded style displays027 and lower-roman displaysxxvii. A custom style limited to1–20 falls back for27; the integer remains27. Incrementing once produces28 regardless of which supported representation is requested.
The examples teach standards-based debugging. Production behavior still requires current browser, print and accessibility testing with the page’s real document structure, fonts and generated-content path.
The reliable debugging order is value first, representation second. Trace which element created the counter, which reset or set rule supplied its value, which increment changed it and which instance is selected at the point of use. Only after the integer is known should the reader inspect the requested counter style, its system, symbols, range, padding, negative form and fallback. This order prevents a Roman numeral, missing glyph or padded string from being mistaken for a scope error. It also makes cross-browser testing more useful because the expected integer and expected string are recorded independently. The same receipt helps with print export, copied text and accessibility review, where a decorative representation may behave differently from a semantic ordered-list marker. Preserve a small reduced test beside the production page so future cascade or DOM changes can be checked against the same expected integer.
This specialist guide belongs to the Websites root. It also connects to The Gold Standard of Education | Learning That Transfers into Life and the How X Works hub. The worked cases are original teaching examples; their numbers are stipulated so that the reasoning can be checked.
eduKateSG · Websites
Find your next learning step
Inspect the integer counter value and scope before asking how a counter style turns that value into visible symbols.
ROUTE 5 · CHAPTERS 21–24
Report and continue
Repair shortcuts, state limits and follow verified routes.
Chapter contents
Define the quantities · Chapters 1–5
1. Name the counter value and its representation
2. Trace counter creation and mutation
3. Define the counter-style algorithm
Work the mechanism · Chapters 6–10
6. Render the central value three ways
7. Use pad without changing arithmetic
8. Handle negative values in order
Audit the evidence · Chapters 11–15
Transfer the reasoning · Chapters 16–20
16. Transfer to nested chapters
17. Transfer to multilingual markers
18. Transfer to print and export
Report and continue · Chapters 21–24
21. Repair the roman numeral changed the value shortcut
22. Repair range resets the counter shortcut
CHAPTER 1 OF 24 · Define the quantities
1. Name the counter value and its representation
Start by naming the physical or logical quantity rather than the displayed number. A CSS counter has an integer value; a counter style converts that value into a string representation.
Work the original teaching case in a visible order. The teaching counter value is27 before any visual style is selected.
Make the reasoning independently checkable. Inspect reset, increment and set operations separately from rendering.
Test transfer by changing one condition while holding the others still. Render the same value with decimal, decimal-leading-zero and lower-roman.
Keep the claim boundary visible. Different strings do not prove different counter values.
Before accepting the result, predict what should change and what should remain fixed. Apply this check: Inspect reset, increment and set operations separately from rendering. Then run the changed case: Render the same value with decimal, decimal-leading-zero and lower-roman. Record any mismatch without rewriting the original assumptions.
The evidence receipt for “Name the counter value and its representation” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
Keep observation, transformation and conclusion in separate evidence columns. counter-reset creates an instance, counter-increment changes it and counter-set assigns a value under the current counter rules.
Work the original teaching case in a visible order. A section counter starts at0 and increments to27 across the stipulated document.
Make the reasoning independently checkable. Use developer tools and a reduced test to confirm the mutation sequence.
Test transfer by changing one condition while holding the others still. Remove the visual style while preserving counter properties.
Keep the claim boundary visible. A marker appearance cannot reveal every scope transition.
Build a compact audit receipt with input, unit, model, calculation, observation and limit. Use this independent check: Use developer tools and a reduced test to confirm the mutation sequence. For transfer, Remove the visual style while preserving counter properties. Preserve the first result beside the changed one.
The evidence receipt for “Trace counter creation and mutation” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
Use the short answer only after the boundary and unit have been fixed. A counter style supplies a system and symbols that transform an integer into a basic representation.
Work the original teaching case in a visible order. The built-in decimal style renders27 as27, while lower-roman rendersxxvii.
Make the reasoning independently checkable. Keep the underlying integer in the audit ledger.
Test transfer by changing one condition while holding the others still. Change only list-style-type or the counter() style argument.
Keep the claim boundary visible. Styling does not rewrite DOM text or counter arithmetic.
Ask a second reader to reproduce the decision from the stated evidence. They should be able to apply: Keep the underlying integer in the audit ledger. Next, Change only list-style-type or the counter() style argument. If the conclusion changes, name the changed condition explicitly.
The evidence receipt for “Define the counter-style algorithm” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
CHAPTER 4 OF 24 · Define the quantities
4. Separate list markers and generated content
Trace the mechanism in the order another reader would need to reproduce it. Styles can be used by list markers or by counter() and counters() in generated content.
Work the original teaching case in a visible order. The same section value appears in a marker and a heading pseudo-element.
Make the reasoning independently checkable. Identify which formatting entry point each display uses.
Test transfer by changing one condition while holding the others still. Give the two displays different styles.
Keep the claim boundary visible. Equal text does not prove one rendering path.
Turn the claim into a falsifiable test. First, Identify which formatting entry point each display uses. Then change one consequential condition: Give the two displays different styles. State which observation would count against the explanation.
The evidence receipt for “Separate list markers and generated content” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
Treat a plausible result as a prompt for a check, not as proof by itself. Counter instances follow document-tree rules; counter-style definitions are named formatting resources.
Work the original teaching case in a visible order. The existing style-containment sibling owns scope questions, while this case holds scope fixed.
Make the reasoning independently checkable. Draw the counter instance chain before changing appearance.
Test transfer by changing one condition while holding the others still. Move the element into a nested reset and observe the value change.
Keep the claim boundary visible. A formatting diagnosis cannot replace a scope diagnosis.
Before accepting the result, predict what should change and what should remain fixed. Apply this check: Draw the counter instance chain before changing appearance. Then run the changed case: Move the element into a nested reset and observe the value change. Record any mismatch without rewriting the original assumptions.
The evidence receipt for “Keep scope ownership separate” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
Start by naming the physical or logical quantity rather than the displayed number. One integer can have several valid representations.
Work the original teaching case in a visible order. Value27 becomes 27, 027 and xxvii under the stipulated styles.
Make the reasoning independently checkable. Read the computed style and inspect generated output.
Test transfer by changing one condition while holding the others still. Increment to28 and compare all three outputs.
Keep the claim boundary visible. Visual width and glyph count are not the numeric magnitude.
Build a compact audit receipt with input, unit, model, calculation, observation and limit. Use this independent check: Read the computed style and inspect generated output. For transfer, Increment to28 and compare all three outputs. Preserve the first result beside the changed one.
The evidence receipt for “Render the central value three ways” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
Keep observation, transformation and conclusion in separate evidence columns. The pad descriptor adds symbols until the initial representation reaches a minimum length.
Work the original teaching case in a visible order. A numeric custom style with pad 3 “0” renders27 as027.
Make the reasoning independently checkable. Confirm that incrementing once gives028, not28 plus a string operation.
Test transfer by changing one condition while holding the others still. Use value1234, which exceeds the pad width.
Keep the claim boundary visible. Padding is minimum-width formatting, not numeric zero insertion.
Ask a second reader to reproduce the decision from the stated evidence. They should be able to apply: Confirm that incrementing once gives028, not28 plus a string operation. Next, Use value1234, which exceeds the pad width. If the conclusion changes, name the changed condition explicitly.
The evidence receipt for “Use pad without changing arithmetic” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
Use the short answer only after the boundary and unit have been fixed. The counter algorithm builds the absolute representation, applies padding with the specified negative interaction and then applies the negative descriptor.
Work the original teaching case in a visible order. A stipulated value -7 is tested with a width-three padded style.
Make the reasoning independently checkable. Compare the result with the specification’s processing order.
Test transfer by changing one condition while holding the others still. Change the negative symbols to parentheses.
Keep the claim boundary visible. String length intuition can fail with multi-grapheme symbols.
Turn the claim into a falsifiable test. First, Compare the result with the specification’s processing order. Then change one consequential condition: Change the negative symbols to parentheses. State which observation would count against the explanation.
The evidence receipt for “Handle negative values in order” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
Trace the mechanism in the order another reader would need to reproduce it. The range descriptor says which integer values a style can represent before fallback.
Work the original teaching case in a visible order. A custom style supports1 through20, so value27 falls outside its range.
Make the reasoning independently checkable. Test values20 and21 at the boundary.
Test transfer by changing one condition while holding the others still. Extend the range to30 without changing the counter value.
Keep the claim boundary visible. Range does not clamp or reset the integer.
Before accepting the result, predict what should change and what should remain fixed. Apply this check: Test values20 and21 at the boundary. Then run the changed case: Extend the range to30 without changing the counter value. Record any mismatch without rewriting the original assumptions.
The evidence receipt for “Use range as a rendering boundary” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
Treat a plausible result as a prompt for a check, not as proof by itself. When a style cannot represent a value, fallback chooses another style, ultimately decimal if necessary or if a loop is detected.
Work the original teaching case in a visible order. Value27 falls back from the1–20 style to decimal.
Make the reasoning independently checkable. Record the selected style and final string.
Test transfer by changing one condition while holding the others still. Create a fallback loop in a disposable test.
Keep the claim boundary visible. Fallback is representation recovery, not content validation.
Build a compact audit receipt with input, unit, model, calculation, observation and limit. Use this independent check: Record the selected style and final string. For transfer, Create a fallback loop in a disposable test. Preserve the first result beside the changed one.
The evidence receipt for “Follow fallback chains” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
Start by naming the physical or logical quantity rather than the displayed number. Prefix and suffix descriptors decorate list markers, while the counter() representation algorithm treats them differently from the returned basic string.
Work the original teaching case in a visible order. A marker receives brackets and a suffix under the custom style.
Make the reasoning independently checkable. Compare list marker output with counter(value, style).
Test transfer by changing one condition while holding the others still. Use the style in generated content.
Keep the claim boundary visible. Copying one display into another can duplicate punctuation.
Ask a second reader to reproduce the decision from the stated evidence. They should be able to apply: Compare list marker output with counter(value, style). Next, Use the style in generated content. If the conclusion changes, name the changed condition explicitly.
The evidence receipt for “Separate prefix and suffix” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
Keep observation, transformation and conclusion in separate evidence columns. numeric, alphabetic, symbolic, additive, cyclic, fixed and extends systems map integers differently.
Work the original teaching case in a visible order. A fixed symbol list beginning at1 cannot represent value27 unless its range or fallback handles it.
Make the reasoning independently checkable. Test first, last and out-of-range values.
Test transfer by changing one condition while holding the others still. Switch from fixed to numeric symbols.
Keep the claim boundary visible. A symbol list alone does not state its arithmetic system.
Turn the claim into a falsifiable test. First, Test first, last and out-of-range values. Then change one consequential condition: Switch from fixed to numeric symbols. State which observation would count against the explanation.
The evidence receipt for “Choose the correct system” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
Use the short answer only after the boundary and unit have been fixed. An additive style decomposes a nonnegative value using weighted symbols in declared order.
Work the original teaching case in a visible order. A teaching additive style represents27 from weights20,5 and1.
Make the reasoning independently checkable. Verify weights are descending and representation is deterministic.
Test transfer by changing one condition while holding the others still. Remove the weight for1.
Keep the claim boundary visible. An incomplete system can trigger fallback.
Before accepting the result, predict what should change and what should remain fixed. Apply this check: Verify weights are descending and representation is deterministic. Then run the changed case: Remove the weight for1. Record any mismatch without rewriting the original assumptions.
The evidence receipt for “Audit additive symbols” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
Trace the mechanism in the order another reader would need to reproduce it. Alphabetic systems require a defined positive range and produce place-like sequences from symbols.
Work the original teaching case in a visible order. A three-symbol teaching alphabet renders successive positive values.
Make the reasoning independently checkable. Check boundary values and zero behaviour.
Test transfer by changing one condition while holding the others still. Ask the style to render0.
Keep the claim boundary visible. A familiar alphabet does not imply support for every integer.
Build a compact audit receipt with input, unit, model, calculation, observation and limit. Use this independent check: Check boundary values and zero behaviour. For transfer, Ask the style to render0. Preserve the first result beside the changed one.
The evidence receipt for “Audit alphabetic limits” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
Treat a plausible result as a prompt for a check, not as proof by itself. Visual counter text and semantic list structure serve related but different purposes.
Work the original teaching case in a visible order. An ordered list retains list semantics while a decorative pseudo-element is separately assessed.
Make the reasoning independently checkable. Inspect the accessibility tree with representative user agents.
Test transfer by changing one condition while holding the others still. Remove the list semantics but keep the visual numbers.
Keep the claim boundary visible. A visually correct sequence can remain an accessibility failure.
Ask a second reader to reproduce the decision from the stated evidence. They should be able to apply: Inspect the accessibility tree with representative user agents. Next, Remove the list semantics but keep the visual numbers. If the conclusion changes, name the changed condition explicitly.
The evidence receipt for “Preserve accessibility semantics” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
Start by naming the physical or logical quantity rather than the displayed number. Nested counters can produce paths with counters(), while each component can use a chosen style.
Work the original teaching case in a visible order. Chapter3, section4 and item2 render as3.4.2 under decimal.
Make the reasoning independently checkable. Trace each counter instance and separator.
Test transfer by changing one condition while holding the others still. Render only the chapter component in upper-roman.
Keep the claim boundary visible. Formatting one component does not repair a wrong nested scope.
Turn the claim into a falsifiable test. First, Trace each counter instance and separator. Then change one consequential condition: Render only the chapter component in upper-roman. State which observation would count against the explanation.
The evidence receipt for “Transfer to nested chapters” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
Keep observation, transformation and conclusion in separate evidence columns. Predefined and custom styles can represent numbering conventions for different writing systems.
Work the original teaching case in a visible order. The teaching page chooses a verified style appropriate to its language context.
Make the reasoning independently checkable. Test fonts, fallback and spoken output with native readers.
Test transfer by changing one condition while holding the others still. Change locale while preserving numeric values.
Keep the claim boundary visible. Glyph availability and cultural convention require real evidence.
Before accepting the result, predict what should change and what should remain fixed. Apply this check: Test fonts, fallback and spoken output with native readers. Then run the changed case: Change locale while preserving numeric values. Record any mismatch without rewriting the original assumptions.
The evidence receipt for “Transfer to multilingual markers” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
Use the short answer only after the boundary and unit have been fixed. Paged media, PDF generation and copy-paste may expose different marker handling.
Work the original teaching case in a visible order. The browser screen and print preview are compared for value27.
Make the reasoning independently checkable. Test the actual export path.
Test transfer by changing one condition while holding the others still. Switch the print stylesheet to decimal.
Keep the claim boundary visible. Screen correctness does not guarantee export fidelity.
Build a compact audit receipt with input, unit, model, calculation, observation and limit. Use this independent check: Test the actual export path. For transfer, Switch the print stylesheet to decimal. Preserve the first result beside the changed one.
The evidence receipt for “Transfer to print and export” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
Trace the mechanism in the order another reader would need to reproduce it. Inserted or removed elements can change counter values while the selected style remains the same.
Work the original teaching case in a visible order. A new section before value27 makes the later item28.
Make the reasoning independently checkable. Observe mutation and recomputed generated content.
Test transfer by changing one condition while holding the others still. Change the style without changing the DOM.
Keep the claim boundary visible. A representation snapshot can become stale after structure changes.
Ask a second reader to reproduce the decision from the stated evidence. They should be able to apply: Observe mutation and recomputed generated content. Next, Change the style without changing the DOM. If the conclusion changes, name the changed condition explicitly.
The evidence receipt for “Transfer to dynamic content” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
Treat a plausible result as a prompt for a check, not as proof by itself. Record DOM order, counter creator, reset, set, increment, integer value, requested style, range, fallback and final string.
Work the original teaching case in a visible order. Another developer reconstructs why27 becomes027 or decimal fallback.
Make the reasoning independently checkable. Remove the integer column and identify the ambiguity.
Test transfer by changing one condition while holding the others still. Version the receipt after a nested reset.
Keep the claim boundary visible. A complete receipt still needs cross-browser and accessibility testing.
Turn the claim into a falsifiable test. First, Remove the integer column and identify the ambiguity. Then change one consequential condition: Version the receipt after a nested reset. State which observation would count against the explanation.
The evidence receipt for “Build the evidence receipt” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
CHAPTER 21 OF 24 · Report and continue
21. Repair the roman numeral changed the value shortcut
Start by naming the physical or logical quantity rather than the displayed number. xxvii is a representation of integer27 under lower-roman.
Work the original teaching case in a visible order. Incrementing once producesxxviii, confirming numeric continuity.
Make the reasoning independently checkable. Compare arithmetic before and after style removal.
Test transfer by changing one condition while holding the others still. Switch to upper-alpha.
Keep the claim boundary visible. Text appearance does not define the stored counter value.
Before accepting the result, predict what should change and what should remain fixed. Apply this check: Compare arithmetic before and after style removal. Then run the changed case: Switch to upper-alpha. Record any mismatch without rewriting the original assumptions.
The evidence receipt for “Repair the roman numeral changed the value shortcut” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
CHAPTER 22 OF 24 · Report and continue
22. Repair range resets the counter shortcut
Keep observation, transformation and conclusion in separate evidence columns. An out-of-range style falls back; it does not force the counter into the range.
Work the original teaching case in a visible order. Value27 remains27 when the1–20 style falls back to decimal.
Make the reasoning independently checkable. Read the next incremented value.
Test transfer by changing one condition while holding the others still. Change fallback to lower-roman.
Keep the claim boundary visible. A different string still carries the same integer.
Build a compact audit receipt with input, unit, model, calculation, observation and limit. Use this independent check: Read the next incremented value. For transfer, Change fallback to lower-roman. Preserve the first result beside the changed one.
The evidence receipt for “Repair range resets the counter shortcut” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
Use the short answer only after the boundary and unit have been fixed. The method can determine whether a bug belongs to counter arithmetic, scope or representation.
Work the original teaching case in a visible order. The teaching debugger inspects value first and style second.
Make the reasoning independently checkable. Write the minimal failing test and expected integer.
Test transfer by changing one condition while holding the others still. Move from a visual discrepancy to a screen-reader issue.
Keep the claim boundary visible. Production support depends on current user agents and the tested environment.
Ask a second reader to reproduce the decision from the stated evidence. They should be able to apply: Write the minimal failing test and expected integer. Next, Move from a visual discrepancy to a screen-reader issue. If the conclusion changes, name the changed condition explicitly.
The evidence receipt for “State the supported decision” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
CHAPTER 24 OF 24 · Report and continue
24. Continue through verified website routes
Trace the mechanism in the order another reader would need to reproduce it. This article sits beside counter scope, cascade priority and invalid-value fallback.
Work the original teaching case in a visible order. Choose the sibling that owns the next mechanism.
Make the reasoning independently checkable. Keep cascade, scope, value and style in separate columns.
Test transfer by changing one condition while holding the others still. Move to style containment only after preserving the formatting test.
Keep the claim boundary visible. This article owns integer counter value versus counter-style representation.
Turn the claim into a falsifiable test. First, Keep cascade, scope, value and style in separate columns. Then change one consequential condition: Move to style containment only after preserving the formatting test. State which observation would count against the explanation.
The evidence receipt for “Continue through verified website routes” records source, input, transformation, changed-context prediction and limit on separate lines. Keep cascade, scope, integer mutation and representation in separate debugging columns.
Continue through the verified reading route
Style containment and counter scope
Style containment and counter scope. Use this when the counter instance, reset boundary or containment rule is wrong.
Cascade layers and important declarations
Cascade layers and important declarations. Use this when the winning declaration is unclear.
Variable fallback and invalid values
Variable fallback and invalid values. Use this when token substitution and declaration validity are the real mechanism.
Frequently asked questions
Does changing to Roman numerals change the counter value?
No. It changes the representation of the same integer.
Does the range descriptor clamp the value?
No. An unsupported value uses the fallback style; the counter’s integer remains unchanged.
Can visual numbering replace semantic list structure?
No. Test list semantics and accessibility separately from visual generated content.
Authoritative sources and further reading
W3C CSS Counter Styles Level 3. Official specification for systems, symbols, negative, range, pad, fallback, prefix, suffix and spoken form.
W3C CSS Lists and Counters Level 3. Official specification for counter creation, inheritance, reset, increment, set and use.
W3C Ready-made Counter Styles. W3C collection and guidance for counter styles used across writing systems.
Return to the Websites subject guide, The Gold Standard of Education, or the How X Works hub.