CSSセレクタの使い方を完全ガイド！初心者でもわかる:not()の使い方
生徒
「先生、CSSのセレクタで、特定の要素だけ除外する方法ってありますか？」
先生
「いい質問ですね。CSSには:not()という“除外”ができる疑似クラスがあるんです。」
生徒
「えっ、CSSに“除外”なんてできるんですか！？全然知りませんでした！」
先生
「そうなんです。初心者でも簡単に使えるので、これから丁寧に解説していきますね！」
1. CSSのセレクタとは？初心者でもわかる基本から説明！
まずは、CSSの「セレクタ」について説明します。セレクタとは、HTMLの中の「どの要素に対してデザインを適用するか」を指定するためのものです。
例えば、<p>というタグの文字の色やサイズを変えたいときは、その<p>をセレクタとして指定します。
2. :not()疑似クラスとは？簡単に言うと「除外フィルター」
:not()は、特定のセレクタを「除外」するためのCSSの機能です。難しい言葉でいうと「疑似クラス（ぎじゅくらす）」という種類のひとつですが、これは「特定の条件に合った要素だけを選ぶ仕組み」と覚えておくといいでしょう。
簡単に言えば「このルールを適用するけど、◯◯だけは除いてね」とCSSにお願いできる便利な道具です。
3. 実際に:not()を使ってみよう！基本の使い方
例えば、ページ内のすべての段落<p>に色をつけたいけれど、特定のクラス名がついている段落だけには色をつけたくない場合、次のように書きます。
<style>
p:not(.no-color) {
color: red;
}
</style>
<p>これは赤くなります。</p>
<p class="no-color">これは除外されて赤くなりません。</p>
4. :not()はどうやって書くの？構文を確認しよう
:not()は次のように書きます。
セレクタ:not(除外したいセレクタ)
「セレクタ」は、影響を与えたいHTMLのタグやクラスのことで、「除外したいセレクタ」は、影響を受けたくないタグやクラスのことです。
つまり、p:not(.no-color)と書けば、クラス名が「no-color」でない段落（pタグ）にだけスタイルが適用されます。
5. 複数の要素を除外する方法は？カンマではダメ！
:not()の中には、カンマ（,）で複数のセレクタを直接書くことはできません。たとえば:not(.a, .b)という書き方はできないのです。
そのかわり、次のように複数の:not()を連続して書く必要があります。
<style>
p:not(.no-color):not(.skip) {
color: green;
}
</style>
<p>これは緑になります。</p>
<p class="no-color">これは除外されます。</p>
<p class="skip">これも除外されます。</p>
6. 応用編：HTMLの構造に応じて使いこなそう！
:not()は、タグ・クラス・IDなど、さまざまな形で使うことができます。たとえば、リストの中で特定のアイテムだけを除外したいときにも便利です。
<style>
li:not(.exclude) {
font-weight: bold;
}
</style>
<ul>
<li>これは太字になります</li>
<li class="exclude">これは除外されて通常の文字です</li>
</ul>
7. :not()はSEOにも役立つ！表示の工夫で見やすいページに
:not()を使うことで、ユーザーが見やすくて、必要な情報だけを目立たせるようなページ作りができます。例えば、「広告だけは目立たせないようにしたい」「特定のボックスだけスタイルを外したい」といったときに使うと、見た目がスッキリ整います。
結果として、ページの読みやすさが上がるので、Googleなどの検索エンジンにも良い影響を与えることがあります。
8. 初心者が間違えやすいポイントとその対策
初心者がよくやってしまう間違いは、次のようなものです。
:not()の中にカンマを入れてしまう- 除外対象にクラス名やIDを正しく書かない（ピリオドやシャープの付け忘れ）
:not()をHTMLではなくCSSに書くことを忘れる
ポイントは、「スタイルを書くのはCSS」、「除外する相手は:not()の中に1つずつ書く」と覚えることです。
9. おさらい：:not()はCSSの柔軟なスタイリングに必須！
:not()を使えば、特定のクラスや要素を簡単に除外できるので、CSSでのデザイン調整がとてもラクになります。
まだCSSを始めたばかりでも、:not()の考え方を知っておくと、後々かなり便利に使えるようになります。
まずは「色をつけるけど、このクラスは除きたい」といった簡単な場面で、どんどん試してみましょう！
この記事を読んだ人からの質問
