【Trainer's Recipe】CSS3の疑似クラス「:not」についてのちょっと便利なTips

このEntryは、G's ACADEMY TOKYOのトレーナー/チューターによる投稿記事です。
授業の中で出たちょっとした質問や疑問、トレーナーが関心のある新技術等を脈絡なく綴っていきます。

こんにちは！ ジーズアカデミートレーナーのコスゲです。
CSS3で導入された「:not()」疑似クラス、すごく便利ですよね！
ご存知の方も多いかもしれない「:not()」疑似クラスについて、今日はちょっと便利なTipsを紹介します。

「:not()」疑似クラスについて実例を交えておさらい

「:not()」疑似クラスは、()の中に入る条件以外のセレクタにCSSを適用したい時に使える疑似クラスです。
たとえばこんなコードがあったとします。

test1.html

<h1>桃太郎とゆかいな仲間たち</h1>
<ul>
 <li class="current">桃太郎</li>
 <li>猿</li>
 <li>犬</li>
 <li>きじ</li>
</ul>

test1.css

li:not(.current){
  color:#f00;
}

この場合、上記のCSSは**「.currentがついていないli要素」に対して「文字色を赤くする」**命令を適用するので、桃太郎以外の「猿・犬・きじ」の文字色が赤くなります。

「:not()」疑似クラスの便利な使い方

よく、下記のような見た目のコンテンツが掲載されているWebサイトを見たことはないでしょうか。

2016.07.03 新着イベント更新しました!

---

2016.07.03 プロフィール更新しました!

---

2016.07.03 インフォメーション更新しました!

Webサイトの更新情報を表示する場所やニュースサイトでの「その日のニュースTopics」の短文を並べる時に使われたりしていますよね！

よく見てみると、ニュースのリストが3つ並んでいて、ニュースの要約文を表す文字の下に線が引かれていますが、一番下のニュースの要約文には下線が引かれていません。
CSSを習いたての頃は、こんな風に書いていました。

test2.html

<ul>
 <li>2016.07.03 新着イベント更新しました!</li>
 <li>2016.07.03 プロフィール更新しました!</li>
 <li>2016.07.03 インフォメーション更新しました!</li>
</ul>

test2.css

li{
  border-bottom:solid 1px #333;
}

li:last-child{
  border-bottom:none;
}

こんな感じで、一番最後の要素に適用できる**:last-child**という疑似クラスを使ったり、あるいは一番最後の要素に何かしらのclassをつけるなどして、一旦、li要素すべてにborder-bottomを適用し、最後のli要素はborderなしと設定するやり方です。

しかし、「:not()」疑似クラスを使用すると、以下のようなCSSで同じように「一番最後のli要素だけborder-bottomをなしにする」ということを実現することができるんです！

test3.css

li:not(:last-child){
  border-bottom:solid 1px #333;
}

日本語で表現するなら「一番最後以外のli要素にborder-bottomを適用する」ということですね！

地味ですが、ちょっとでもCSSのコードをスマートに短く書くことが出来ますので、この考え方を覚えておくとSassなどでも応用が利くのではないでしょうか！

以上、G's ACADEMY TOKYOトレーナーのコスゲによるCSS3の疑似クラス「:not」についてのちょっと便利なTipsでした！