Does the 'counter-reset' property always have to be defined on the parent container?
Question
My understanding is that the counter-reset is set on the parent container to define a counter. Then, you set the counter-increment with the name of the counter on each child-element you want incremented, and then of course you use the counter name for the content property to have it displayed.
But in the example given in w3schools, the counter-reset is set on a sibling, not a parent, and i can't understand how does that work out?
body { counter-reset: section; } h1 { counter-reset: subsection; } h1::before { counter-increment: section; content: "Section " counter(section) ": "; } h2::before { counter-increment: subsection; content: counter(section) "." counter(subsection) " "; }
<body> <h1>HTML and CSS h1</h1> <h2>HTML Tutorial h2</h2> <h2>CSS Tutorial h2</h2> <h2>Bootstrap Tutorial h2</h2> <hr> <h1>JavaScript h1</h1> <h2>JavaScript Tutorial h2</h2> <h2>jQuery Tutorial h2</h2> <h2>JSON Tutorial h2</h2> <hr> <h1>Server Side h1</h1> <h2>SQL Tutorial h2</h2> <h2>PHP Tutorial h2</h2> </body>
Now, why is the counter-reset 'subsection' set on h1, but then incremented on h2? Where is the logic here? Shouldn't the counter-reset be on the parent? Why is it set on the sibling?
Also, why is it that, if you set the counter-increment on the element you want incremented, it works fine even if you don't set a counter-rest on the parent, but if you set the counter-increment on the pseudo-element, then it doesn't work?
.new { padding-left:50px; } h3 { counter-increment: c-test; } h3::before { content: counter(c-test) " "; background-color: red; border-radius: 100px; padding: 3px; margin-right: 5px; text-align: center; width: 20px; font-weight: normal; display: inline-block; }
<div class="new"> <h3>Tokyo</h3> <h3>Osaka</h3> <h3>Nagoya</h3> <h3>Fukuoka</h3> <h3>Sapporo</h3> </div>
You see here that the counter-increment is set on h3 without having a counter-rest on the parent, and it works just fine.
However, here:
.new { padding-left:50px; } h3::before { counter-increment: c-test; content: counter(c-test) " "; background-color: red; border-radius: 100px; padding: 3px; margin-right: 5px; text-align: center; width: 20px; font-weight: normal; display: inline-block; }
<div class="new"> <h3>Tokyo</h3> <h3>Osaka</h3> <h3>Nagoya</h3> <h3>Fukuoka</h3> <h3>Sapporo</h3> </div>
..the counter-increment is inside the pseudo-element, and it's not being incremented. Why?
If you now just set a counter-reset on the parent, it works again:
.new { padding-left:50px; counter-reset:c-test; } h3::before { counter-increment: c-test; content: counter(c-test) " "; background-color: red; border-radius: 100px; padding: 3px; margin-right: 5px; text-align: center; width: 20px; font-weight: normal; display: inline-block; }
<div class="new"> <h3>Tokyo</h3> <h3>Osaka</h3> <h3>Nagoya</h3> <h3>Fukuoka</h3> <h3>Sapporo</h3> </div>
or, if you create an h2 inside the parent, and then add the counter-reset in it, like this:
.new { padding-left:50px; } h2 { counter-reset: c-test; } h3::before { counter-increment: c-test; content: counter(c-test) " "; background-color: red; border-radius: 100px; padding: 3px; margin-right: 5px; text-align: center; width: 20px; font-weight: normal; display: inline-block; }
<div class="new"> <h2>CITIES</h2> <h3>Tokyo</h3> <h3>Osaka</h3> <h3>Nagoya</h3> <h3>Fukuoka</h3> <h3>Sapporo</h3> </div>
Why does this work? I can't understand the logic behind this property. I thought counter-reset starts the counter, or resets the counter, and it has to be in the parent.
Can somebody explain the logic behind this property?
1 answers
solution1
0 ACCPTED 2020-11-03 20:39:24
From the specification
The scope of a counter starts at the first element in the document that has a 'counter-reset' for that counter and includes the element's descendants and its following siblings with their descendants . However, it does not include any elements in the scope of a counter with the same name created by a 'counter-reset' on a later sibling of the element or by a later 'counter-reset' on the same element.
And
If 'counter-increment' or 'content' on an element or pseudo-element refers to a counter that is not in the scope of any 'counter-reset' , implementations should behave as though a 'counter-reset' had reset the counter to 0 on that element or pseudo-element.
I think both of the above cover all your questions.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.