My name is Sofi. I am CSS engineer. This is my blog.

If you're really hurt without styles, you can them on.


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 {
        counter-reset: n;

    li {
        counter-increment: n;

    li::before {
        content: counters(n, '.');

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 ✨



If you see a link to this article in a source that is not listed here, please let me know.