【CSS】:not否定擬似クラスの使い方とできること

はじめに

新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay24です！

昨日は「Ruby 後置whileの挙動をみる」と言う記事でした。

Ruby 後置whileの挙動をみる

本記事では、CSSの「:not」という否定擬似クラスの使い方とできることについて書いていきます。

:not否定擬似クラスの基本

:not否定擬似クラスとは？

:notとは、CSS上で特定の要素やクラス以外のものを指定したい時に使う擬似クラスです。

特定の要素やクラス以外のものを取得するため、「否定擬似クラス」とも呼ばれています。

:notの基本的な構文

:not(hogehoge) {
  プロパティ: 値;
}

これが基本的な、:notの構文です。

hogehogeの中身が今回取得しない対象を表します。

:notの例文1

<ul>
  <li>apple</li>
  <li class="sample">orange</li>
  <li>lemon</li>
</ul>

このように書いた際に、.sample クラスがついたもの以外は、色を青にしたい場合はCSSをこのように書きます。

li:not(.sample) {
  color: blue;
}

:notの例文2

例１のほかにも、実装の際によくあるのが、リストの最後の要素だけ下線を消す場合です。

デザインとしては、このようなイメージです。

この場合、HTMLとしては:

<ul>
  <li>apple</li>
  <li>orange</li>
  <li>lemon</li>
</ul>

CSSは、実装方法が複数あります。

方法1

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

li:last-of-type {
  border-bottom: none;
}

すべてのliに下線をつけてから、兄弟要素のグループの中でその種類の最後の要素をとってくる :last-of-type擬似クラスで最後のliの下線を消す方法。

こちらでも問題なく動くのですが、:not を使うともっと簡潔に書くことが可能です。

:notを使った方法

li:not(:last-of-type){
  border-bottom: 1px solid #CCC;
}

このように、:notの中に :last-of-typeや :nth-childなどのシンプルセレクターを入れ込むことで、簡潔にCSSを書くことができます。

:notの組み合わせ

:notは中身にさまざまなセレクタを組み合わせたり、複数使うことにより、さらに強力なセレクタになりますが、実際どこまでの組み合わせが可能なのか、こちらでご紹介していきたいと思います。

:notの組み合わせでできること

:notのセレクタとして擬似クラス

先ほどもご紹介しましたが、:not の中に :last-of-type や :nth-of-child などの擬似クラスを使用することができます。

li:not(:nth-child(2n + 1)){
  background: #CCC;
}

こちらでは、奇数の<li>にだけ、背景色をつけています。##### 複数の:notをつなげる
複数のクラスに対して、 :notをかけたい場合、 .notをつなげることができます。

li:not(.apple):not(.orange){
  background: #CCC;
}

このように書くと、 .appleクラスと .orangeクラスの両方の背景色を変更することができます。

属性セレクタとの組み合わせ

例えば、ボタンのdisableや特定のリンクに飛ぶところ以外を取得したい、など :notの中身に属性セレクタを指定することができます。

li:not([disabled]){
  background: mediumseagreen;
}

ここでは、ボタンがdisabledではない場合に背景色をつけることができます。

:notの組み合わせでできないこと

:notの入れ子

下記のように、 :notを入れ子にすることはできません。
使用したくなるシーンは少ないかもしれませんが、気をつけてください。

// 動かないコードです
li:not(:not(.sample)){
  background: mediumseagreen;
}

シンプルセレクター以外をセレクタとして使用する

シンプルセレクターとは下記のセレクタの総称です。
要素型セレクタ（タイプセレクタ）全称セレクタ（ユニバーサルセレクタ）属性セレクタクラスセレクタIDセレクタ擬似クラス

これ以外のセレクタを使用するとすると、動きませんので注意してください。

// 動かないコードです
li:not(::first-line){
  background: mediumseagreen;
}

// 動かないコードです
li:not(.a, .b, [c]){
  background: mediumseagreen;
}

ブラウザサポート

:notは現在、ほとんどの主要ブラウザで実装されていますが、念のため下記をご確認の上、プロジェクト内で使用するかを決めると良いでしょう。

まとめ

今回は:not否定擬似クラスの使い方とできることをご紹介しました。

:not を使うことで、わかりやすいコードがかけたり、コード量を短縮することもできるので、使い方をマスターしていただければと思います。