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

  • 13
    いいね
  • 0
    コメント

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

css3_logo.jpg

こんにちは! ジーズアカデミートレーナーのコスゲです。
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でした!