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

CSS擬似

 状態:-  閲覧数:1,958  投稿日: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)



週間人気ページランキング / 12-1 → 12-7
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 26
2 RGB ⇔ Lab | 色変換(色) 12
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 6
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 6
4 鉄道会社毎のカラーコード | カラーコード(色) 5
5 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 4
5 自由変形ツール | Illustrator CS3(Illustrator) 4
5 色モデルイメージ図 | 色変換(色) 4
5 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 4
5 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
6 デザイン変更 | Webデザイン(デザイン) 3
6 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 3
6 似顔絵ジェネレーター : 似顔絵メーカー / NIGAOE MAKER 3
6 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 3
6 キャラクター無料作成ジェネレーター / FLASH以外 / オンラインサービス | イラスト参考(デザイン) 3
6 空間的 / 可逆な JPEG ファイルの読み込みは実行されません | Photoshop CS3(Photoshop) 3
7 画像縦横比の問題 | 画像 2
7 コンソールエラー / ブラウザ間差異 | ブラウザ 2
7 「親要素越え」✕「横幅Max状態での画像スライダー」を検討 | Webデザイン(デザイン) 2
7 RGBの種類 / ビットカラー | RGB(色) 2
2025/12/8 1:01 更新