CSSでループ処理。一定間隔で(背景色等を)繰り返し指定する

CSS

目次一覧

　状態:結論(後で見返す用) 　閲覧数:927 　投稿日:2020-04-01 　更新日:2020-04-01
交互に繰り返す ／ 間隔3で繰り返す ／ 間隔4で繰り返す

交互に繰り返す ／ 間隔3で繰り返す ／ 間隔4で繰り返す

　閲覧数:203　投稿日:2020-04-01　更新日:2020-04-01　

交互に繰り返す


:nth-child(2n+1)
奇数番目の要素に適用

:nth-child(2n)
偶数番目の要素に適用

比較一覧表
行 2n+1 2n 備考
1 1 - -
2 - 2 -
3 3 - -
4 - 4 -
5 5 - -
6 - 6 -
7 7 - -
8 - 8 -
9 9 - -
10 - 10 -
11 11 - -
12 - 12 -
13 13 - -
14 - 14 -
15 15 - -
16 - 16 -
17 17 - -
18 - 18 -
19 19 - -
20 - 20 -

間隔3で繰り返す


:nth-child(3n+1)
3の倍数(0含む)＋1番目の要素に適用

:nth-child(3n+1)
3の倍数(0含む)＋2番目の要素に適用

:nth-child(3n)
3の倍数の要素に適用

比較一覧表
行 3n+1 3n+2 3n 備考
1 1 - - -
2 - 2 - -
3 - - 3 -
4 4 - - -
5 - 5 - -
6 - - 6 -
7 7 - - -
8 - 8 - -
9 - - 9 -
10 10 - - -
11 - 11 - -
12 - - 12 -
13 13 - - -
14 - 14 - -
15 - - 15 -
16 16 - - -
17 - 17 - -
18 - - 18 -
19 19 - - -
20 - 20 - -

間隔4で繰り返す


:nth-child(4n+1)
4の倍数(0含む)＋1番目の要素に適用

:nth-child(4n+2)
4の倍数(0含む)＋2番目の要素に適用

:nth-child(4n+3)
4の倍数(0含む)＋3番目の要素に適用

:nth-child(4n)
4の倍数の要素に適用

比較一覧表
行 4n+1 4n+2 4n+3 4n 備考
1 1 - - - -
2 - 2 - - -
3 - - 3 - -
4 - - - 4 -
5 5 - - - -
6 - 6 - - -
7 - - 7 - -
8 - - - 8 -
9 9 - - - -
10 - 10 - - -
11 - - 11 - -
12 - - - 12 -
13 13 - - - -
14 - 14 - - -
15 - - 15 - -
16 - - - 16 -
17 17 - - - -
18 - 18 - - -
19 - - 19 - -
20 - - - 20 -


ページで使用されている「id名」「class名」をChromeで取得したい 　

CSSで出来ないこと



類似度ページランキング
順位 ページタイトル抜粋 ％
1 CSS3で背景色にグラデーションをつける 36
2 親要素の背景色を、CSSで打ち消したい 33
3 フォーム要素に対する(私の)CSS適用ルール 31
4 画像背景色を透明化するオンラインサービス 28
5 CSS色指定 28
6 CSSで画像をロールオーバー 27
7 「Photoshop CS3」で、画像を円形に切り取り、背景を透明にする 27
8 (私の)CSSコーディングルール 26
9 JPEG画像ファイルコピーを繰り返しても画質は劣化しない。画質が劣化するのは上書き保存する場合 26
10 Bootstrap3 で、固定ナビゲーションの下だけ背景色を指定 26
11 Chromeデバッグする際CSSが()で表示される 25
12 レスポンシブスマホサイトで、意図せず横スクロールが発生する場合は、URLを折り返し表示するよう設定 25
13 複数CSSファイルを、PHPを利用して1ファイルにする。～ 2018年 25
14 borderプロパティでは、線のスタイル・太さ・色について上下左右バラバラの指定を一括することは出来ない 24
15 Chromeバージョンアップでフォント指定が効かなくなる 24
16 サイトにプログラムコードを貼り付ける preタグのCSS 24
17 ChromeでCSSを確認する4つの方法 24
18 RGB → HSL を 色モデルで考える 24
19 使用していないCSSをチェックする、標準的な方法を知りたい 24
20 一つの要素に対して「id 属性値」を複数指定することは出来ない 23
2022/10/03 23:24 更新
週間人気ページランキング ／ 9-26 → 10-2
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 71
2 16進数カラーコード ／ 2進数 37
3 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 26
4 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 19
5 「bgcolor」「background-color」「background」の違い | CSS 16
6 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 15
7 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 14
7 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 14
7 Design 0 14
8 RGBの種類 ／ ビットカラー | RGB(色) 12
9 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 11
10 「属性」「プロパティ」「アトリビュート」の違い | CSS 9
10 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 9
11 rem | 単位(CSS) 8
11 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 8
11 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 8
11 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 8
11 黒体 ／ 色温度 ／ D65（6500K）／ D50（5000K）／ K | 色 8
12 カラーコード ／ 色コード | カラーコード(色) 7
13 パッケージ化されてない拡張機能 | Chrome 拡張機能 6
2022/10/3 1:01 更新