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

CSS ＞ 擬似

　状態:- 　閲覧数:2,177 　投稿日: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/5/19 19:47 更新
週間人気ページランキング ／ 5-12 → 5-18
順位 ページタイトル抜粋 アクセス数
1 Design 0 7
2 RGBの種類 ／ ビットカラー | RGB(色) 4
2 「属性」「プロパティ」「アトリビュート」の違い | CSS 4
2 Chromeでmhtml保存を選択できなくなったので、拡張機能「Save Page State」を導入 | Chrome 拡張機能 4
3 HTMLエディタ カテゴリー 3
3 鉄道会社毎のカラーコード | カラーコード(色) 3
3 ICCプロファイル | カラーマネージメント(色) 3
3 CSS 「id」「class」名 に関する調査履歴 1 | 命名規則(コーディングルール) 3
3 textareaのスクロールバーが横へはみ出す場合は、「box-sizing:border-box;」を指定する | CSS 3
3 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 3
3 HSV → RGB 計算方式の違い | 色変換(色) 3
3 アイコン | 3系(Bootstrap) 3
3 ドロワーメニューが表示されない理由 | モバイルデザイン(デザイン) 3
4 CSS カテゴリー 2
4 「position:sticky;」がどうしても効かない →
を一旦削除してみる →
に「display:inline;」を指定 | CSSトラブル対応(CSS)
2
4 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 2
4 RGB ⇔ Lab | 色変換(色) 2
4 画像縦横比の問題 | 画像 2
4 画像大きさ | 他サイト調査(HTML) 2
4 「Google Chrome」を再起動するためには「chrome://restart」へアクセスします。 | Google Chrome(ブラウザ) 2
2026/5/19 5:05 更新