Edited at

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

More than 3 years have passed since last update.

この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でした!