要素毎に順番で背景色変更

CSS ＞ 擬似

　状態:- 　閲覧数:2,138 　投稿日:2017-11-16 　更新日:2017-12-27
テーブル
<style>

tr:nth-child(5n+1){

  background-color: #ffebee;

  border-bottom: 1px solid #f44336;

}

tr:nth-child(5n+2){

  background-color: #E3F2FD;

  border-bottom: 1px solid #2196F3;

}

tr:nth-child(5n+3){

  background-color: #E8F5E9;

  border-bottom: 1px solid #4CAF50;

}

tr:nth-child(5n+4){

  background-color: #FFF3E0;

  border-bottom: 1px solid #FF9800;

}

tr:nth-child(5n){

  background-color: #F5F5F5;

  border-bottom: 1px solid #9E9E9E;

}

</style>


リスト
<style>

li:nth-child(5n+1){

  background-color: #ffebee;

  border-bottom: 1px solid #f44336;

}

li:nth-child(5n+2){

  background-color: #E3F2FD;

  border-bottom: 1px solid #2196F3;

}

li:nth-child(5n+3){

  background-color: #E8F5E9;

  border-bottom: 1px solid #4CAF50;

}

li:nth-child(5n+4){

  background-color: #FFF3E0;

  border-bottom: 1px solid #FF9800;

}

li:nth-child(5n){

  background-color: #F5F5F5;

  border-bottom: 1px solid #9E9E9E;

}

</style>


擬似要素（Pseudo-elements）

指定要素の(内容で)2番目以降最後まで。要素:nth-of-type(n+2)



類似度ページランキング
順位 ページタイトル抜粋 ％
1 要素毎に順番で背景色変更 100
2 trタグに背景色 38
3 親要素の背景色を、CSSで打ち消したい 38
4 CSS3で背景色にグラデーションをつける 30
5 背景 27
6 背景画像を要素幅一杯に広げ、リサイズにも対応させる 26
7 擬似要素 24
8 背景斜め灰色白ストライプ線 23
9 デザイン変更 21
10 デザイン変更 21
11 マウスオーバーで画像変更スクリプト 20
12 ライセンス変更 20
13 Fireworks で背景画像透明化 19
14 aタグで複数のブロック要素を囲むやり方 19
15 CSSでループ処理。一定間隔で(背景色等を)繰り返し指定する 19
16 画像背景色を透明化するオンラインサービス 18
17 Bootstrap3 で、固定ナビゲーションの下だけ背景色を指定 18
18 フォーム要素に対する(私の)CSS適用ルール 17
19 画面幅に応じて取得ディレクトリパスを変更したい 17
20 直前の要素、直後の要素 17
2026/2/27 23:16 更新
週間人気ページランキング ／ 2-20 → 2-26
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 18
2 「bgcolor」「background-color」「background」の違い | CSS 5
2 RGBの種類 ／ ビットカラー | RGB(色) 5
2 RGB ⇔ Lab | 色変換(色) 5
3 「属性」「プロパティ」「アトリビュート」の違い | CSS 4
4 画像縦横比の問題 | 画像 3
4 効果を打ち消すスタイルシート | CSS 3
4 色モデルイメージ図 | 色変換(色) 3
4 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
4 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 3
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 3
5 画面キャプチャ 2022 年 | Chrome 拡張機能 2
5 CSSだけで、任意の要素に配置した画像を画面一杯に表示することは、基本的には出来ない。「img src」「背景画像」「div要素」何れの場合でも。可能なのは、特殊な要件が重なった場合だけ | CSS 2
5 フォントアイコン表示不具合の原因は重複読込＋α | フォント 2
5 「Font Awesome」で「ダウンロードしたSVGを直接表示」する方法 2
5 Chrome ブラウザで画像の DataURI を取得 | Google Chrome(ブラウザ) 2
5 FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 | Font Awesome(フォント) 2
5 ｢レイヤー」＋「レイヤー効果」をコピーして新規psdにペースト | Photoshop 2
5 「Fireworks」後継として「Gravit Designer」を使用していくことを一度は決定したが、2022 年時点で入手可能なソフトウェアは日本語入力未対応　 | Gravit Designer(ソフトウェア) 2
5 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 2
2026/2/27 5:05 更新