忍者ブログ

ブログ

   

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

リストの偶数行・奇数行で交互に背景色を変える

ozonです。

件名のとおり。
縦長のリストを見やすくするため、行の背景色を
交互に変えるテクニック。

リスト( li,dt,dd )でもテーブル( th,td )でも使用可だそう。
※thとtdは自分では試していない

CSSの擬似クラスで以下のコードを加えるだけ。

:nth-child(even)

ちなみに、evenは偶数を示す。奇数ならoddとする。

具体的な使用例では・・・

dd:nth-child(even) {
background-color:#000
}

上記のコーディングで、偶数行の背景色が黒になる。
PR
  

COMMENT

NAME
TITLE
MAIL (非公開)
URL
EMOJI
Vodafone絵文字 i-mode絵文字 Ezweb絵文字
COMMENT
PASS (コメント編集に必須です)
SECRET
管理人のみ閲覧できます
 

カレンダー

04 2025/05 06
S M T W T F S
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

アクセスランキング

成果履歴

2012/02 642,703円
2013/01 668,780円
2012/12 331,230円
2012/11 247,542円
2012/10 288,633円
2012/09 314,480円
2012/08 237,926円
2012/07 181,065円
2012/06 253,489円
2012/05 665,464円
2012/04 452,864円
2012/03 554,660円
2012/02 386,575円
2012/01 348,123円
2011/12 243,519円
2011/11 280,782円
2011/10 233,750円
2011/09以前は省略
Copyright ©  -- ブログ --  All Rights Reserved

Design by CriCri / material by DragonArtz Desighns / powered by NINJA TOOLS / 忍者ブログ / [PR]