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

CSS

目次一覧

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

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

　閲覧数:234　投稿日: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で直前の要素を取得するセレクタはない。ので、直後の要素を取得してマイナス設定値を指定しました。 25
14 複数CSSファイルを、PHPを利用して1ファイルにする。～ 2018年 25
15 (ショートカットキーで拡張機能を起動する)拡張機能のキーボード割り当て 25
16 borderプロパティでは、線のスタイル・太さ・色について上下左右バラバラの指定を一括することは出来ない 24
17 サイトにプログラムコードを貼り付ける preタグのCSS 24
18 Chromeバージョンアップでフォント指定が効かなくなる 24
19 ChromeでCSSを確認する4つの方法 24
20 RGB → HSL を 色モデルで考える 24
2023/2/05 6:38 更新
週間人気ページランキング ／ 1-29 → 2-4
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 49
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 38
3 「bgcolor」「background-color」「background」の違い | CSS 34
4 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 25
5 RGBの種類 ／ ビットカラー | RGB(色) 20
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 18
6 Design 0 18
7 「東京都」のカラーコード取得は難しい | カラーコード(色) 17
8 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 16
9 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 15
9 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 15
10 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 14
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 13
11 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 13
11 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 13
11 ICCプロファイル | カラーマネージメント(色) 13
11 HSLとHSVの違い | 色変換(色) 13
11 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 13
12 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 12
13 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 11
2023/2/5 1:01 更新