CSS 3のセレクタ:スタイルシートを繰り返し適用する

エ・ビスコム・テック・ラボ
2009-01-09 22:34:01
  • このエントリーをはてなブックマークに追加

要素が1つだけのときにスタイルシートを適用する

 :nth-child()と:nth-last-child()を利用して「:nth-child(1):nth-last-child(1)」と指定すれば、同じ階層の要素が1つしかないときにスタイルシートを適用することができる。

 たとえば、次のサンプルでは1項目しかないリストAにスタイルシートが適用され、背景が黄色で表示される。複数の項目があるリストBにはスタイルシートは適用されない。

サンプル07 サンプル07(画像をクリックすると拡大します)
li:nth-child(1):nth-last-child(1){
background-color: yellow;
}

リストA

  • テキストA01

リストB

  • テキストB01
  • テキストB02
  • テキストB03
ブラウザで表示を確認する

 なお、「:nth-child(1):nth-last-child(1)」の指定は、「:only-child」というセレクタに置き換えて記述することもできる。

サンプル08 サンプル08(画像をクリックすると拡大します)
li:only-child{
background-color: yellow;
}
ブラウザで表示を確認する

 また、:nth-of-type()と:nth-last-of-type()を利用して「:nth-of-type(1):nth-last-of-type(1)」と指定した場合は、「:only-of-type」というセレクタに置き換えることが可能だ。:nth-of-type()と:nth-last-of-type()について、詳しくは前回の記事「CSS 3のセレクタ「:nth-child()」の問題を回避する方法と応用例」を参照してほしい。

 次回は、CSS 3の属性セレクタを紹介する。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]