Set margin (indent) based on counter value in CSS

Question

I'm wondering whether it is possible to set the element margin-left based on the value of a counter, using CSS3.

In other words, having a HTML like this:

<section>A</section>
<section>B</section>
<section>C</section>

have first block with a margin-left: 0em, second one with 1em and so on.

So far, I have tried the following:

section
{
    counter-increment: sect-indent;
    margin-left: calc(counter(sect-indent) * 1em);
}

But it seems that calc() doesn't support getting counter values.

Is such a thing possible using CSS3? I'm not interested in solutions involving ECMAScript.

Answer 1

It only works inside the content property, not like a variable the way you are thinking of it. If you view it in DevTools or the like, it's not an integer. You'd still see counter(myCounter) in there.

"In CSS 2.1, the values of counters can only be referred to from the 'content' property." source

Answer 2

For a Small Set

If you are dealing with a small set of section elements next to each other (as your sample shows), then using the adjacent sibling selector (or nth-of-type if only CSS3 support is desired) will get you what you want without counting. However, probably much more than about five elements and the css could get too cumbersome, so if you are looking at this for hundreds of elements, it is not practical.

section { margin-left: 0}
section + section {margin-left: 1em}
section + section + section {margin-left: 2em}