html - CSS を使用してリストの 3 番目の項目ごとにスタイルを設定しますか?

Question

3番目のリスト項目ごとにスタイルを設定することはできますか?

現在、私の960px広い div には、左に浮かんでいて 3x3 グリッド ビューに表示されているボックスのリストがあります。それらには の右マージンもありますが30px、3 番目、6 番目、および 9 番目のリスト項目にはこのマージンがあるため、行を下にジャンプしてグリッドが正しく表示されません。

3 番目 6 番目と 9 番目に別のクラスを与えずにマージンを持たないようにするのはどれくらい簡単ですか、それともそれを行う唯一の方法ですか?

Answer 1

:nth-childはい、いわゆるセレクターを使用できます。

この場合、次を使用します。

li:nth-child(3n) {
// Styling for every third element here.
}

:nth-child(3n):

3(0) = 0
3(1) = 3
3(2) = 6
3(3) = 9
3(4) = 12

:nth-child()Chrome、Firefox、および IE9+ で互換性があります。

:nth-child()IE6 から IE8 までの他の疑似クラス/属性セレクターで使用する回避策については、このリンクを参照してください。

Answer 2

:nth-childそのためにセレクターを使用できます

li:nth-child(3n) {
 /* your rules here */
}

Answer 3

これを試して

box:nth-child(3n) {  
     ...
}

デモ

nth-childブラウザのサポート

Answer 4

:nth-childあなたが探している答えです。