
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にはスタイルシートは適用されない。
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」というセレクタに置き換えて記述することもできる。
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の属性セレクタを紹介する。
folllow builer on
twitter
- 新着記事
- 特集
- ブログ
- 企画特集
-
意識してますか?PCの「信頼性」
-
データ活用を加速するエコシステム
-
2020年代を勝ち抜くインフラ
-
働き方改革は身近な「改善」から
-
Why ワークプレース?
-
ビジネス成功の砦はここにあり!
-
ビジネスの大きな転換点で勝者に!
-
攻めと守りのクラウド活用とは!?
-
変化への対応はリアルタイム経営で
-
ITシステムは永久のβ版思考で
-
DX成功の鍵はセキュリティにあり
-
レガシーなインフラ設計を見直す
-
AI活用が激変する新たなインフラ
-
特集:ビジネスを止めるな!
-
講演レポ:ポスト2020時代の基盤
-
下した決断は「ハイブリッドへ」
-
どこまで可能?企業を究極の自動化
-
「脱レガシー」なくしてDXはない
-
隗より始めよ
-
サブスクモデルのSaaSで業務改善
-
明治創業の鉄道企業がAWSに挑戦
-
RPAがニガテなExcelをどう使う
-
ウルトラ帳票文化を乗り越える!
-
働き方改革にモニターが有効なワケ
-
特集:ポスト2020時代のCX再考
-
クラウドバックアップお悩み相談室
-
分析されたデータを活用できるか?
-
働き方、生産性を根底から底上げ!