web関係、制作関係でのよしなしごとを書いています。
2010/7/8 計算式をリスト化
リストや表を見やすくするための方法として、liやセルの背景色を交互に付ける方法があります。
これをCSSで表現するためには、疑似クラスの:nth-child(n)を使います。
:nth-child()は()の中に奇数の場合はodd、偶数の場合はevenを記述します。
また()の中には数字や計算式を入れる事も可能です。
適用される順番は、liの場合は最初のliから、trの場合は最初のtrから、th、tdの場合はtrごとのth、tdから適用されます。
したがって、tableで縦に背景色を付ける場合はtrに、横に背景色を付ける場合はth、tdに指定するように記述します。
li:nth-child(even){
background:#CCCCCC;
}
tr:nth-child(even){
background:#CCCCCC;
}
td:nth-child(even){
background:#CCCCCC;
}
td_01 | td_02 |
td_01 | td_02 |
td_01 | td_02 |
td_01 | td_02 |
td_01 | td_02 |
td_01 | td_02 | td_03 | td_04 | td_05 |
td_01 | td_02 | td_03 | td_04 | td_05 |
td_01 | td_02 | td_03 | td_04 | td_05 |
また、:nth-child()はIE8以下には対応してないので、jqueryを読み込んだ後にaddclassなどで対応する必要があります。
$(function() {
$("table tr:nth-child(even)")
.addClass("tr_even");
});
.tr_even{
background:#CCCCCC;
}
初めまして。そして、ようこそ!京都でwebデザイナー、htmlコーダーをやっているackyです。
このサイトはでイラストレーションギャラリーとCSSのテクニックを紹介しています。
イラストレーションでは、主にF1やスーパースポーツ、モータースポーツをテーマにトレース技法で描いています。イラストのポイントは直線で構成したソリッドでシャープな質感です。
CSSテクニック、webの小技ではweb制作の時にちょっと役に立つようなCSSテクニックや、positionのrelative、absoluteの使い方、リスト(li)の横並びや、リスト(li)横並びの中央寄せ、フォームのチェックボックスやラジオボタンとテキストのずれを揃える方法、Photoshopのチャンネルを使った髪の毛の切り抜き方法、お気に入りアイコン(ファビコン、webアイコン)の作り方などを紹介しています。
(このサイトについて何がありましたら左記のアドレスからご連絡をお願いします)