.
How we can use the self inheritance of CSS-counters?
As we know from theory (you can read the specification or my previous article), each element inherits from its parent a set of counters, which it completes with its own counters and passes down the tree to be inherited by its children.
Instantiating a new counter on an element which inherited an identically-named counter from its parent creates not a normal new counter of the same name, but the one nested inside the existing counter.
For reaching and displaying this new counter we can use the counter() function, which returns us
the innermost counter of a given name on the element.
Or, if we need all counter with given name on given element, we can use the counters()
function. It returns us all those counter in a list.
It also has a second argument, a separator string counters on display. It works the same way as the
argument of function Array.prototype.join()
in JavaScript.
So, with the self inheritance of CSS-counters we can develop numbering of complicate list with only one counter!
<ul>
<li></li>
<li>
<ul>
<li></li>
<li></li>
....
</ul>
</li>
</ul>
<style>
ul {
counter-reset: n;
}
li {
counter-increment: n;
}
li::before {
content: counters(n, '.');
}
</style>
How does it work?
On each ul element, a counter named n is created. But on the inner ul
element, it is not created independently, but nested in the counter inherited from the parent with the same
name.
Therefore, you can get them both at once using the counters() function on the spike element.
And display pretty with the second argument ✨
Sources
- The css-list-3 specification.
Citation
If you see a link to this article in a source that is not listed here, please let me know.