Misinformation in the counter-reset example for the list-item counter #33422
Labels
Content:CSS
Cascading Style Sheets docs
needs triage
Triage needed by staff and/or partners. Automatically applied when an issue is opened.
MDN URL
https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset
What specific section or headline is this issue about?
Overriding the list-item counter
What information was incorrect, unhelpful, or incomplete?
Although the example does not work as described in Chrome (there is already a bug filed in Chromium), the comparison of the CSS
counter-reset
property with the HTMLstart
attribute is incorrect.If defined as in the example (
counter-reset: list-item 3;
), the generated ::marker content starts at "4", not at "3" as with<ol start="3">
.What did you expect to see?
The incorrect comparison/information can be noted/adjusted, or the example can be expanded, similar to the example on the counter-increment reference page, where
counter-increment: none;
is set on the selected:first-of-type
element.But the use of
none
forcounter-increment
seems not to work forlist-item
in the major browsers. Following rule seems to work:Do you have any supporting links, references, or citations?
I've created an overview on CodePen where the differences can be inspected and played with.
Do you have anything more you want to share?
From my testing, browsers seem to be very inconsistent with the implicit
list-item
counter and how it can be modified.Personally, I have a hard time figuring out how and what exactly is possible with the
list-item
counter and getting the same results in different browsers. Additionally, there's also the use forcontent
of pseudo-elements with thecounter()
function, which makes the above points even more confusing.Maybe someone has more insight on this, but the article definitely lacks some information on this...
MDN metadata
Page report details
en-us/web/css/counter-reset
The text was updated successfully, but these errors were encountered: