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などの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]