【CSS】疑似クラス:not()の使い方とは？注意点やサンプルコードも解説

CSSの擬似クラス:not()を使うことで、指定のセレクタ以外にスタイルを適用することができます。

使い方が特徴的で、「指定方法が良く分からない」「設定がうまく反映されない」という方も多いのではないでしょうか？

便利な疑似クラスなので、曖昧なままではなく、きちんと理解しておきたいですよね。

今回は、CSSの疑似クラス:not()をマスターしたいという方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSの疑似クラス:not()を適切に使いこなせるようになりますよ。

ぜひ最後まで読んでくださいね！

擬似クラスとは？

そもそも疑似クラスとはどのようなものなのでしょうか。

疑似クラスとは、スタイルを適用したい位置や状態を指定するものです。

状態でいうと、マウス操作による:hoverや:checkedなどがよく知られていますね。

:hoverは以下のようにリンクをマウスオーバーした際のスタイルを指定します。

a:hover {
  color: orange;
}

:checkedは、チェックボックスやラジオボタンがチェックされている状態のスタイルを指定できる疑似クラスですね。

また、位置の指定には、最初の要素を指定する:first-childなどがあります。

:not()もこれらと同様の疑似クラスとなります。

疑似クラス:not()とは？どう使うもの？

:not()は、CSSの中で特定のセレクタ以外の要素にスタイルを指定したい場合に使います。

基本的に、要素にスタイルを適用する際には、以下のように記述しますね。

p {
  color: green;
}

これにより、p要素の文字の色が緑色になります。

この要素を:not()で囲うことで、p要素以外にスタイルを指定することができます。

:not(p) {
  color: green;
}

p要素が除外され、それ以外の要素の文字が緑色になります。

このように特定の要素などを除外するため、否定疑似クラスとも呼ばれます。

:not()は上記のような要素以外にも、クラスやid、属性などを入力することができます。

:not()を使うときの注意点

:not()は記述の仕方によっては、想定通りの結果が得られなかったり、無効になったりすることがあります。

ここでは、「:not()ではできないこと」と「使用する際の注意点」について解説していきますね。

:not()で指定しているつもりなのに、効かないという場合は、以下のようなミスをしていないか確認してみてください。

入れ子にできない

:not()を入れ子にすることはできません。

以下のコードは書いても動作しないので、書かないようにしましょう。

:not(:not(p)){
  color: green;
}

シンプルセレクタにのみ利用できる

:not()に使用できるのは以下のようなシンプルセレクタのみです。

ただし、全称セレクタを使った以下のような指定は、要素ではない要素を指定しているため、意味のないコードになります。

:not(*) {
  color: green;  
}

また、疑似要素には適用できません。

以下のような記述しても動作しないため、注意しましょう。

:not(p::before){
  background: skyblue;
}

複数のセレクタをまとめて書かない

:not()の中にカンマで区切った複数のセレクタを書くことは推奨されていません。

:not(.sample1, .sample2, p){
  background: skyblue;
}

元々対応していない指定だったのですが、いくつかのブラウザで機能するようになってきました。

ですが、まだ広く普及しておらず、動作の保証がされないため、この方法は使わない方が良さそうですね。

適用範囲を考える

:not()の適用範囲にも注意が必要です。

テーブル内のリンクを除外する際に以下のような記述をしてしまうかもしれません。

ですが、このような指定は、テーブル内のリンクを除外しないため書かないようにしましょう。

:not(table) a {
    background: skyblue;
}

table要素を除外しているわけですが、その中にあるtr要素は「table要素以外」に含まれてしまうため、さらにその中のa要素には背景色がついてしまいます。

こういった仕組みを把握していないと、期待通りに表示されない場合があるのできちんと覚えておきましょう。

:not()を使ったサンプルコード

:not()の使い方や注意点などを紹介してきましたね。

では、実際にどのように使用するのか、サンプルコードを紹介していきましょう。

要素を除く

特定の要素を除外することができます。

<div>
<h2>タイトル</h2>
<p>テキスト</p>
<p>テキスト</p>
<a href="#">リンク</a>
<h2>タイトル</h2>
<p>テキスト</p>
<p>テキスト</p>
<h3>タイトル</h3>
<p>テキスト</p>
<div>

div :not(p) {
  background: #ffae8a;
}

これにより、p要素以外の背景色を変えることができました。

「:not(p)」のみでは、htmlやbodyが含まれてしまうので、全体の背景色は変わってしまいます。

上記のように、:not()を使って背景色を指定する際には、親要素まで書く必要がありますね。

特定のid、クラスの要素を除く

特定のid、クラスを除外することができます。

<ul>
  <li>項目1</li>
  <li class="sample1">項目2</li>
  <li>項目3</li>
  <li id="sample2">項目4</li>
  <li>項目5</li>
</ul>

li:not(.sample1) {
  color: #66ccff;
}
li:not(#sample2) {
  background: #ffae8a;
}

クラス名のついたもの以外は文字が青くなり、id名がついたもの以外は背景がオレンジになっているのが確認できたでしょうか。

後述しますが、除外したい要素が何番目の要素なのか決まっている場合には、順番での指定も可能です。

特定の属性がある要素を除く

特定の属性がついた要素を除外することができます。

<p title="test">title属性あり</p>
<p>title属性なし</p>
<p>title属性なし</p>
<p title="test">title属性あり</p>
<p>title属性なし</p>

p:not([title]) {
  color: #fa8072;
}

title属性が指定されたp要素を除いたものの文字が赤くなります。

次のように属性値を指定することも可能です。

<form action="#">
<label>名前：<input type="text" name="name"></label>
<label>メールアドレス：<input type="email" name="email"></label>
<label>パスワード：<input type="password" name="pass"></label>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</form>

label {
  display: block;
}
label input:not([type="text"]) {
  background: #CCC;
}

label要素の子要素のinput要素の中で「type=”text”」を除いた要素に対して、スタイルを指定しています。

名前以外の入力欄の背景色が灰色になっているのを確認できたでしょうか。

また、CSSセレクタにある親要素のlabelを削除すると、送信ボタンとリセットボタンの背景も灰色になりますね。

色々書き換えてみて、違いを確認してみてください。

疑似クラスを除く

:not()を使って、特定の疑似クラスを除いた指定をすることができます。

ここでは、疑似クラスを使った例をいくつか紹介していきますね。

それぞれ詳しく解説していきましょう。

マウスオーバーを除外

マウスオーバーとは、要素の上にカーソルを乗せた状態のことです。

送信ボタンなどで、カーソルを乗せると色が変わったり、形が変形したりすることがありますよね。

これらの動作は、疑似クラスの:hoverで指定ができます。

これに:not()を組み合わせると、マウスオーバーをしていない状態のスタイルを指定することができます。

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
  <li>項目4</li>
</ul>

li:not(:hover) {
  background: #ffae8a;
}

リスト項目の背景がオレンジ色になり、カーソルを乗せると色が外れることが確認できますね。

マウスオーバーでスタイルを付け足すのではなく、スタイルを削除したい場合には、こちらの方法もぜひ試してみてくださいね。

最初の要素を除く

:not()と疑似クラス:first-childを使って、最初の要素を除くことができます。

ブログなどの記事で、タイトルの上に余白を作ることがありますよね。

このときに、h2、h3に余白を指定するのではなく、:not()を使った指定を行うと見やすいデザインになります。

例えば、以下のようなHTMLコードに対して、

<section>
<h2>タイトル</h2>
<p>テキスト</p>
<p>テキスト</p>
<h2>タイトル</h2>
<p>テキスト</p>
<p>テキスト</p>
</section>

h2:not(:first-child) {
  margin-top: 50px;
}

こうすることで、1番目に来るh2には指定が適用されないようになります。

最初のタイトルの上には余白を開ける必要が無い、という場合に役立ちますね。

first-of-typeではなく、first-childとすることで、section要素の先頭にh2以外の要素が来たときにも対応できます。

<section>
<p>テキスト</p>
<h2>タイトル</h2>
<p>テキスト</p>
<p>テキスト</p>
<h2>タイトル</h2>
<p>テキスト</p>
<p>テキスト</p>
</section>

first-of-typeは、先頭の要素ではなく、最初のh2要素を示します。

このため、上記コードの1つ目のテキストの下にあるh2には、余白が削除されます。

先頭の要素ではないh2の余白も削除したいので、first-childにするわけです。

最後の要素を除く

今度は、:not()と疑似クラス:last-childを使って最後の要素を除外してみます。

よくある例として、リストの最後の要素の下線だけを消したい場合があります。

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
  <li>項目4</li>
  <li>項目5</li>
  <li>項目6</li>
</ul>

この例であれば、:not()を使わなくとも、以下のCSSで実装することができますね。

ul {
  width: 250px;
  margin: 0 auto;
  padding: 5px;
  list-style: none;
  border: 2px double #32cf5e;
}
li {
  border-bottom: 1px solid #CCC;
}
li:last-of-type {
  border-bottom: none;
}

分かりやすいようにリスト全体のサイズを指定し枠線で囲っています。

リスト項目に下線を指定し、last-of-typeを使って最後の要素のみ下線を削除しています。

以下のように、:not()を使うことで簡潔に記述することができます。

ul {
  width: 250px;
  margin: 0 auto;
  padding: 5px;
  list-style: none;
  border: 2px double #32cf5e;
}
li:not(:last-of-type){
  border-bottom: 1px solid #CCC;
}

コードがすっきりしましたね。

一度指定したものを、後から打ち消しの指定をするという方法はコードが複雑になりやすく、管理が大変になります。

こういった方法を積極的に使っていくことをおすすめします。

色々と試してみてくださいね。

n番目の要素を除く

今度は、:not()と:nth-child()を使って、n番目の要素を除外してみましょう。

除外したい要素が1つのみで、何番目なのか決まっている場合は、その数値を入れます。

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
  <li>項目4</li>
  <li>項目5</li>
  <li>項目6</li>
</ul>

CSSは以下のように記述します。

ul {
  width: 250px;
  margin: 0 auto;
  padding: 5px;
  list-style: none;
  border: 2px double #32cf5e;
}
li:not(:nth-child(5)){
  background: #ffae8a;
}

これで、5番目以外の要素に背景色がつきました。

:nth-child()に計算式を入れる

:nth-child()の中に計算式を入れることもできます。

以下のように3nと入力すると、3の倍数を除いた要素が適用されます。

ul {
  width: 250px;
  margin: 0 auto;
  padding: 5px;
  list-style: none;
  border: 2px double #32cf5e;
}
li:not(:nth-child(3n)){
  background: #ffae8a;
}

奇数の場合は「2n+1」または「odd」、偶数の場合は「2n」または「even」となります。

ただ、この2つの場合には、:not()を使う必要はないですね。

「3n+2」などの数式も入れることができるので、ぜひ試してみてください。

複数のセレクタを除外する

注意点の説明で、以下のように複数のセレクタを使わない、という話をしましたね。

:not(.sample1, .sample2, p){
  background: skyblue;
}

一部ブラウザでは機能しますが、まだ広く適用されてないため、このような記述は避けた方が良さそうです。

複数のセレクタを除外したいときには、以下の方法を使います。

<div>
<h1>見出し</h1>
<p class="sample1">テキスト1</p>
<p>テキスト2</p>
<p class="sample2">テキスト3</p>
<span>テキスト4</span>
<p>テキスト5</p>
<p>テキスト6</p>
</div>

div :not(.sample1):not(.sample2):not(span) {
  background: #ffae8a;
}

これにより、クラス名が「sample1」「sample2」の要素とspan要素が除外されてます。

こちらのケースでも親要素のdivを付け忘れると、htmlやbodyが含まれてしまい、全体の背景色が変わってしまうので注意しましょう。

応用として、これまで学習してきた疑似クラスなどを:not()に書いてみても良いですね。

:not()の数はいくつ繋いでも機能しますが、空白は開けないようにしましょう。

空白を開けてしまうと、想定とは異なる指定になります。

実際に手を動かして、きちんと機能するのか、ぜひ確認してみてくださいね。

まとめ：:not()を積極的に使っていこう

今回は、CSSの疑似クラス:not()の使い方を詳しく解説してきました。

使う際の注意点や実用的なサンプルコードなども紹介しましたね。

最初はとっつきづらいかと思いますが、慣れてくるととても便利な疑似クラスになります。

Webページのコーディングなどで積極的に使用していきましょう。

今回の記事が参考になれば幸いです。