CSSのnotセレクタの使い方を完全ガイド！特定の要素を除外する方法

:not()で特定の要素だけを除外するセレクタの使い方

先生と生徒の会話形式で理解しよう

生徒

「リストの中で、一つだけ特別なクラスがついているもの以外、全部の色を変えたいのですが…。」

先生

「そんな時はCSSの『:not()』という便利な機能を使えば、特定の要素だけをのぞいてスタイルを当てることができますよ。」

生徒

「『それ以外』という指定ができるんですね！具体的にはどう書くんですか？」

先生

「基本的な書き方から、初心者の方がつまずきやすいポイントまで丁寧に解説しますね！」

1. CSSのnotセレクタとは？除外の基本を学ぼう

ウェブサイトのデザインをしていると、「全部にこの色を塗りたいけれど、このボタンだけは塗りたくない」という場面がよくあります。通常、CSSは「これにスタイルを当てる」という指定をしますが、:not()（ノット）を使えば、「これ以外のすべてにスタイルを当てる」という逆転の発想ができるようになります。

プログラミング未経験の方にわかりやすく例えるなら、学校の先生が「出席番号3番の人以外、全員立ってください」と指示を出すようなものです。一人ひとりに「立って」と言うよりも、のぞきたい人を一人指定する方がずっと簡単ですよね。このように、特定の条件に当てはまらないものを選択するための道具を「否定疑似クラス」と呼びます。

2. クラス名を使って特定の項目だけをのぞく方法

一番よく使われるのが、特定のクラス名がついた要素だけを除外する方法です。クラス名とは、HTMLのタグにつける「名札」のようなものです。例えば、重要ではない項目にだけ「sub」という名札をつけておき、それ以外の文字を大きくするといった操作ができます。

書き方は、対象となる要素のあとに:not(.クラス名)と続けます。カッコの中には、のぞきたい名札の名前を入れるだけです。これで、大量の項目があっても、特定の一つだけを仲間外れにすることが可能になります。


<style>
    /* .specialというクラスがついていない「li」にだけ色をつける */
    li:not(.special) {
        color: gray;
    }
</style>

<ul>
    <li class="special">ここは特別な項目（色は変わりません）</li>
    <li>ここは普通の項目</li>
    <li>ここも普通の項目</li>
</ul>

ブラウザ表示

ここは特別な項目（色は変わりません）
ここは普通の項目
ここも普通の項目

3. 複数のタグから特定のタグだけを除外する

クラス名だけでなく、タグそのものを指定して除外することもできます。例えば、一つの箱の中に、見出し（h2）や文章（p）、リンク（a）などが混ざっている場合です。「見出し以外のすべての文字を少し薄くしたい」といったときに威力を発揮します。

パソコン初心者の方は、まずは「どのタグを仲間外れにするか」を決めましょう。カッコの中にタグ名（例えば h2 など）を書けば、そのタグだけがスタイルの適用から外れます。これにより、デザインにメリハリをつけることができ、読みやすいホームページを作成することができます。


<style>
    /* divの中にある要素のうち、h2以外の文字を青くする */
    .content-box *:not(h2) {
        color: #007bff;
    }
</style>

<div class="content-box">
    <h2>タイトルは見出し（黒いまま）</h2>
    <p>説明文は青くなります。</p>
    <span>補足情報も青くなります。</span>
</div>

ブラウザ表示

タイトルは見出し（黒いまま）

説明文は青くなります。

補足情報も青くなります。

4. 最後の要素以外に余白をつけたいときのテクニック

サイト制作で非常によく使うプロの技があります。それは、並んでいるボタンやリストの間にだけ隙間（余白）を作ることです。普通に余白を設定すると、一番最後の要素の後ろにも余白がついてしまい、デザインが右や下にズレて見えることがあります。

ここで:not(:last-child)という組み合わせを使います。これは「最後の子要素ではないもの」という意味です。つまり、「一番最後以外には全部、右側に隙間を開けてね」という命令になります。これを使うと、最後の一つの余白を手動で消す手間が省け、非常にスマートなコードになります。


<style>
    .menu-item {
        display: inline-block;
        padding: 10px;
        background-color: #eee;
    }
    /* 最後（last-child）以外の要素に、右側の余白を作る */
    .menu-item:not(:last-child) {
        margin-right: 20px;
    }
</style>

<div class="menu-group">
    <div class="menu-item">ホーム</div>
    <div class="menu-item">ブログ</div>
    <div class="menu-item">お問い合わせ</div>
</div>

ブラウザ表示

ホーム

ブログ

お問い合わせ

「お問い合わせ」の右側には余白がありません。

5. 入力フォームでチェックボックス以外を装飾する

お問い合わせページなどで使われる入力フォームでも、この除外セレクタは活躍します。例えば、「入力欄の枠線をすべて綺麗に整えたいけれど、チェックボックスだけはそのままにしたい」という場合です。

もし一括でスタイルを当ててしまうと、チェックボックスまで枠線がついたり、変な色になったりして操作しづらくなってしまいます。input:not([type="checkbox"])のように指定すれば、文字を入れる欄だけをオシャレにして、チェックボックスなどの特殊なボタンはそのままの形を保つことができます。利用者が使いやすい画面を作るための、優しい工夫ですね。

6. 画像にhover効果をつけたくない特定のケース

マウスをのせたときに画像を少し透明にする演出は人気ですが、バナー広告や特定のアイコンだけは動かしたくないときがあります。そのような場合も、あらかじめ除外用のクラスを作っておけば簡単です。

パソコンを初めて触る方が操作しているときに、意図しない場所が動くと驚かせてしまうかもしれません。:not()を使って、「この種類の画像は動かさない」と決めておくことで、親切なサイト設計が可能になります。サンプルを使って、動きの違いを確認してみましょう。


<style>
    /* .no-fadeというクラスがついていない画像だけ、のせた時に薄くする */
    .gallery img:not(.no-fade):hover {
        opacity: 0.5;
        cursor: pointer;
    }
    .gallery img {
        width: 120px;
        transition: 0.3s;
    }
</style>

<div class="gallery">
    <img src="/img/sample120-120.jpg" alt="動く画像">
    <img src="/img/sample120-120.jpg" class="no-fade" alt="動かない画像">
</div>

ブラウザ表示

左の画像はマウスをのせると透けますが、右は変わりません。

7. 注意点！notの中に書けないものとルール

とても便利な:not()ですが、いくつか守らなければならないルールがあります。まず、カッコの中にさらに:not()を入れるような「入れ子」の状態は、昔のブラウザでは動かないことがありました（最近の書き方ではできるようになりましたが、初心者のうちは避けたほうが無難です）。

また、カッコの中に書くのはあくまで「条件」です。複雑すぎる指示を詰め込むと、後で自分で見たときに「何を除外したかったんだっけ？」と混乱してしまいます。ルールはシンプルに保つのが、プログラミングを長く続けるコツです。掃除をするときに「キッチン以外を全部掃除して」と言うのと同じで、範囲が明確であることが大切です。

8. 複数の条件を組み合わせて除外する最新の書き方

最新のCSSでは、カッコの中にカンマ区切りで複数の条件を書くことができるようになりました。例えば、:not(.special, .hidden)と書けば、「特別でもなく、隠されてもいないもの」という意味になります。以前は一つずつ分けて書く必要がありましたが、今はまとめて指定できるので非常に便利です。

これにより、除外したいものが複数あっても、一行でスッキリと記述できます。複数の「名札」を使い分けているような複雑なページでも、この一行があるだけでデザインのコントロールが自由自在になります。初心者の皆さんも、基本に慣れたらぜひこの「まとめ指定」を試してみてください。

9. 実践！読みやすいブログデザインへの応用

ブログの記事を書くとき、文章の間に広告や、おすすめ記事のカードを挟むことがありますよね。こうした「文章ではない要素」をのぞいて、純粋な文章にだけ行間や文字サイズを設定したいときに、除外セレクタは真価を発揮します。

p:not(.ad-text)のように設定しておけば、広告の文字サイズはそのままに、読者が読むメインの文章だけを読みやすく調整できます。このように、:not()を使いこなすことは、単にコードを短くするだけでなく、サイトを訪れる人への「おもてなし」にも繋がるのです。少しずつ練習して、思い通りのデザインを作れるようになりましょう！

2026年最新スキルアップ・実践セミナー