css - CSS のカウンター値に基づいて余白 (インデント) を設定する

Question

margin-leftCSS3を使用して、カウンターの値に基づいて要素を設定できるかどうか疑問に思っています。

つまり、次のような HTML があります。

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

最初のブロックにはmargin-left: 0em、2 番目のブロックには1emなどがあります。

これまでのところ、次のことを試しました。

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

しかし、calc()カウンター値の取得をサポートしていないようです。

CSS3を使ってそのようなことは可能ですか？ECMAScript を含むソリューションには興味がありません。

Answer 1

小さなセットの場合

sectionサンプルが示すように、互いに隣接する要素の小さなセットを扱っている場合は、隣接する兄弟セレクターを使用すると (またはnth-of-typeCSS3 サポートのみが必要な場合) 、カウントせずに必要なものが得られます。ただし、おそらく 5 つよりもはるかに多くの要素があり、css が煩雑になる可能性があるため、数百の要素についてこれを見ている場合、それは実用的ではありません。

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