css - CSS のループを記述できますか

Question

このように生成されたIDを取得するシナリオがあります

<div class="containerLength">
<div id="new-1"></div>
<div id="new-2"></div>
<div id="new-3"></div>
<div id="new-4"></div>
</div>

等々

css を記述して、ループを介してそれらをターゲットにする方法はありますか? 多分何かのような

#new[i; for(i=0; i<="containerLength.length"; i++)]{
float:left;
}

おそらく私は正しい夢を見ていますか？

score 13 · Accepted Answer

純粋な CSS でループを実行することはできませんが、SASS や LESS などを使用している場合は、次のように両方を実行できます。

サス：

@for $i from 1 through 4
  .#{$class-slug}-#{$i}
    width: 60px + $i

少ない:

ただし、ネストされた各に同じスタイルを適用したいだけだと仮定するとdiv、次のことができます

.containerLength > div{
  float: left;
}

または、名前付きのクラスを作成し、.float-leftそれを右に浮かせたい各要素に適用します。

score 2 · Accepted Answer

div[id|="new"]{
    float: left;
}

引用符が必要な場合と必要でない場合がありますが、奇妙な場合があります。

score 1 · Accepted Answer

css でロジックをまったく記述できません。ただし、JavaScript で CSS を管理したり、1 つのルールに複数の ID を含めたり、単にクラスを使用したりすることはできます。

また、ID の配置方法とブラウザのサポート範囲の広さに応じて、Css 属性セレクターを使用できる場合もあります。

5 に答える 5