CSSのみで交互色 … リスト

CSS

 状態:-  閲覧数:4,722  投稿日:2013-01-04  更新日:2013-01-04
リスト背景色を交互に変更したい

・Bootstrapを利用しているサイトだったので、
<table class="table table-striped">
 …
</table>

みたいに、
<ul class="table table-striped">
 …
</ul>

とやってみるも、何にも変わらない

・うん、ここに書かれている通り、「Optional classes」だってことは(テーブルのオプションだってことは)知ってたんだけどさ
・もしかしたら、イケるんちゃうか? と思いやってみるも、見事に惨敗
・バカだね、オレって…

・結局、こちらを参考にコーディングしたよ
CSSで表現するためには、疑似クラスの:nth-child(n)を使います。
:nth-child()は()の中に奇数の場合はodd、偶数の場合はevenを記述します。
また()の中には数字や計算式を入れる事も可能

「先頭がBoxで始まる、divタグid要素」内にある、 「ul」内「li」要素の偶数番目の背景色を指定
▼css
div[id^="Box"] ul li:nth-child(even){
background:#F1F1F1;;
}



ページ内リンクの位置を微調整するためには、Negative margin を使用する

親要素の横幅を越えたヘッダー/レスポンシブ対応



週間人気ページランキング / 7-17 → 7-23
順位 ページタイトル抜粋 アクセス数
1 Design 0 13
2 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 4
3 「Midjourney」を使用してみた感想。2022 年 8 月 2 時点では、画像生成能力自体は素晴らしいと思いますが、UIが致命的に分かりづらかったです。 | AI画像生成 3
3 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 3
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 3
4 パッケージ化されてない拡張機能 | Chrome 拡張機能 2
4 「CSSプロパティ」書く順番 | コーディングルール 2
4 鉄道会社毎のカラーコード | カラーコード(色) 2
4 Font Awesome 4.7.0 | Font Awesome(フォント) 2
4 Chrome 起動オプションを利用して、キャッシュを無効にする 2
4 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 2
4 経緯 / 用語の違いが分からない / ソフトウェア比較一覧表 2
5 Chromeブックマーク 運用ルール | Chromeブックマーク(ブラウザ) 1
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 1
5 画像からカラーコードを取得するオンラインツール | カラーコード(色) 1
5 vw(Viewport Width) 1
5 「transform:rotate();」と「transform:scale();」のプロパティ名は同じ 1
5 同系色を探す | 配色(色) 1
5 ページ固有CSSの取り扱い / ページとの紐付け 1
5 デフォルトの「Google Chrome」ではURL欄にwwwが表示されないため、「Microsoft Edge」を使用する | Google Chrome(ブラウザ) 1
2026/7/24 5:05 更新