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

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}