該当しないを選択するという発想
ちゃんと調べれば便利なモノがしっかり実装されていたりすることはよくあるかと思います。どうしても、昔から知っている方法でやってしまいがちなので、どこかのタイミングでそういうモノをみつけたときは忘れないように身につけておきたいものですよね。まあ、主に自分に向けて書いているみたいなものなのですが。。。
というわけで、今回はCSS3で実装されているセレクタのnotについて書いてみます。
色々と調べ物をしていた時に目にとまったのがこのページでした。
【Trainer’s Recipe】CSS3の疑似クラス「:not」についてのちょっと便利なTips
http://qiita.com/gsacademy_tokyo/items/3874472eb9fbc9d4b9ef
はて、notって使ったことないな。どんな感じ？ と思って読んでいくと
「:not()」疑似クラスは、()の中に入る条件以外のセレクタにCSSを適用したい時に使える疑似クラスです。
ほほう。条件以外のものにスタイルを適用させる…該当しないを選択するという発想か！ と感心してしまったわけです。
さらに実例をみて感激
実例部分にリストの下線について書いてあるのですが、そうそうそうやって書いてたっていうコードでわかりやすかった。いやー感激してしまいました。
実際のコードはページにて確認してもらいたいのですが、要点としては、liにスタイルをあてる際、:notを用いてlast-child以外のものにborder-bottomでスタイルをあてるという書き方。実にスッキリ！！ 昔は全部のliにborder-bottomで書いて、別にlast-childだけnoneにして消すみたいな方法でした。。。ほんと、例に書かれていたまんま書いてました。
他の使い方を考えてみる
たとえばクラス名でひとつのタグに複数のクラスを書いている場合など、共通するものを選択させてそれ以外のものにスタイルを適用する。文字で書くとなんだかわかりづらいですが
html <div class="text codeline red"></div> <div class="text codeline blue"></div> <div class="img codeline red"></div> <div class="img codeline blue"></div> <div class="pdf contents red"></div>
みたいなものがあったとして、div:not([class*=”text”])とすれば、下の３つが選択になります。
css
.red {color: red;}
.blue {color: blue;}
div:not([class*="text"]) {color: black;}
.pdf:after {content "PDF";}
セレクタの組み合わせ次第でいろんな場面で活躍できそうです。まずはリスト部分の活用から実践してみようと思ってます。