LoginSignup
13

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-08-04

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13