CSS 3のセレクタ:最初と最後、偶数と奇数の要素にスタイルシートを適用

エ・ビスコム・テック・ラボ
2008-12-12 19:20:01
  • このエントリーをはてなブックマークに追加

奇数と偶数の項目にそれぞれ色をつける

 :nth-child()と:nth-last-child()セレクタでは、数字の代わりに「odd」または「even」と指定すると、奇数と偶数の項目にそれぞれ色をつけて表示することができる。ここでは、奇数番目の項目を黄色で、偶数番目の項目を水色で表示するように指定している。

リストをストライプ模様で表示することができる リストをストライプ模様で表示することができる
li:nth-child(odd){
background-color: yellow;
}

li:nth-child(even){
background-color: skyblue;
}
ブラウザで表示を確認する

 このように:nth-child()や:nth-last-child()を利用すると、指定したナンバーや奇数、偶数の項目にスタイルシートを適用することができ、非常に便利に利用することができる。

 しかし、リストのデザインを設定しているときには問題ないのだが、用途を広げていくといろいろな問題が出てきてしまう。この問題については、詳しくは次回に紹介する。

  • コメント(1件)
#1 Cee   2008-12-16 12:05:22
早く全てのブラウザで対応されます様に。。。
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]