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

CSS ＞ 擬似

　状態:- 　閲覧数:906 　投稿日: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 trタグに背景色 38
2 親要素の背景色を、CSSで打ち消したい 38
3 CSS3で背景色にグラデーションをつける 30
4 背景 27
5 背景画像を要素幅一杯に広げ、リサイズにも対応させる 26
6 擬似要素 24
7 デザイン変更 21
8 デザイン変更 21
9 マウスオーバーで画像変更スクリプト 20
10 ライセンス変更 20
11 Fireworks で背景画像透明化 19
12 aタグで複数のブロック要素を囲むやり方 19
13 CSSでループ処理。一定間隔で(背景色等を)繰り返し指定する 19
14 画像背景色を透明化するオンラインサービス 18
15 Bootstrap3 で、固定ナビゲーションの下だけ背景色を指定 18
16 フォーム要素に対する(私の)CSS適用ルール 17
17 画面幅に応じて取得ディレクトリパスを変更したい 17
18 「Photoshop CS3」で、画像を円形に切り取り、背景を透明にする 16
19 組積造。高さが異なる要素を、上からレンガ状に配置 16
20 色変換コード ／ 確認用 16
2022/10/04 0:35 更新
週間人気ページランキング ／ 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 更新