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

CSS

目次一覧

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

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

　閲覧数:71　投稿日: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 「Photoshop CS3」で、画像を円形に切り取り、背景を透明にする 27
7 CSSで画像をロールオーバー 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 サイトにプログラムコードを貼り付ける preタグのCSS 24
16 Chromeバージョンアップでフォント指定が効かなくなる 24
17 ChromeでCSSを確認する4つの方法 24
18 RGB → HSL を 色モデルで考える 24
19 使用していないCSSをチェックする、標準的な方法を知りたい 24
20 一つの要素に対して「id 属性値」を複数指定することは出来ない 23
2021/7/24 19:44 更新
週間人気ページランキング ／ 7-17 → 7-23
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 53
2 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | 色 26
3 Design 0 23
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 17
5 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | HTML5(HTML) 15
6 HSLとHSVの違い | 色変換(色) 14
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 13
8 「bgcolor」「background-color」「background」の違い | CSS 12
8 「CSSキーフレームアニメーション」実行後のCSS設定 | アニメーション 12
9 RGBの種類 ／ ビットカラー | RGB(色) 11
10 画面キャプチャ | Chrome 拡張機能(ブラウザ) 9
11 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 8
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 8
11 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 8
12 16進数カラーコード ／ 2進数 7
12 コズミックブルーが何色か分からない | 色 7
13 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 6
13 100/7%ではなく100%/7。(100/7)%ではなく(100%/7) | CSS 6
13 グラデーション練習 | Fireworks 8(Fireworks) 6
13 「属性」「プロパティ」「アトリビュート」の違い | CSS 6
2021/7/24 1:01 更新