css - 親要素で3の倍数の要素を選択します

Question

親要素内に6の倍数のインデックスを持つ要素をcssで選択する方法はありますか？

たとえば、この場合、3の倍数のみを選択します。

<div>
    <p></p>
    <p></p>
    <p></p> <!--to select -->
    <p></p>
    <p></p>
    <p></p> <!--to select -->
    <p></p>
    <p></p>
    <p></p> <!--to select -->
</div>

Answer 1

使用:nth-child(n)：

p:nth-child(3n) {
  background: red
}

デモ： http： //jsbin.com/azehum/4/edit

このメソッドはIE9+で機能します（ソース：caniuse.com）。古いブラウザでのサポートが必要な場合は、jQueryを使用して要素を選択し、それらにクラスを追加できます。

$("p:nth-child(3n)").addClass("redbg");

Answer 2

nthcssでセレクターを使用する

p:nth-child(6n) {/*css here*/}

ここでもっと見る