cssのnotセレクタを覚えよう｜使い方から具体例まで

（最終更新日：2023年8月）

✔このような疑問を持っている方へ

「CSS notセレクタってどんな機能があるの？」
「CSS notセレクタの使い方を学びたい」
「CSS notセレクタの具体的な実例が知りたい」

✔当記事でお伝えする内容

• CSS notセレクタの基本知識
• CSS notセレクタの書き方と応用テクニック
• CSS notセレクタの実践的な例

当記事では、CSS notセレクタの基本概念から、オプションを駆使した応用的な方法まで、実例を交えて丁寧に解説しています。

ぜひ最後までご覧ください。

CSSのnotセレクタを理解するための前提知識

今回は、「CSS」について、特に「not」セレクタの活用について深掘りしていきます。

• CSSとは？
• セレクタとは？
• CSS「not」セレクタを活用しよう

CSSとは？

CSS（Cascading Style Sheets）は、HTMLと組み合わせてウェブページのスタイル（色、フォント、レイアウトなど）を指定するための言語です。

CSSを理解し使いこなすことで、一貫性のあるデザインと使いやすいインターフェースを持つウェブページを作成できます。

セレクタとは？

セレクタは、CSSのルールをどのHTML要素に適用するかを指定するためのパターンです。

以下を用いて特定のHTML要素を選択します。

• タグ名
• クラス名
• ID名

このセレクタを使いこなすことで、効率的にスタイリングをおこなえます。

/* タグセレクタ: すべての<h1>要素に適用 */
h1 {
    color: blue;
}

/* クラスセレクタ: "title"クラスを持つ要素に適用 */
.title {
    font-size: 24px;
}

/* IDセレクタ: "introduction" IDを持つ要素に適用 */
#introduction {
    font-weight: bold;
}

/* 複合セレクタ: "content"クラス内の<p>要素に適用 */
.content p {
    font-style: italic;
}

CSS「not」セレクタを活用しよう

「not」セレクタは、特定の要素を除外してスタイリングをおこなうためのセレクタです。

複雑なページレイアウトで一部の要素だけスタイルを変えたいときなどに非常に役立ちます。

CSS「not」セレクタの構文と基本

次に、「not」セレクタの構文とその基本的な使い方について説明します。

• 「not」セレクタの構文
• 基本的な使い方とポイント

「not」セレクタの構文

「not」セレクタは次のような構文になります。

:not(セレクタ) {
  /* プロパティ */
}

この構文を使うと、「セレクタ」に該当しない全ての要素に対してプロパティを適用できます。

基本的な使い方とポイント

「not」セレクタの基本的な使い方は、特定の要素を除外することです。

例えば、全ての<p>要素にスタイルを適用したいけれど、特定のクラスが付いている<p>要素だけはスタイルを適用したくない、といった場合に使います。

p:not(.exclude) {
  color: blue;
}

実際に試してみよう

ここからは、具体的な例を使って「not」セレクタの使い方を見ていきましょう。

• シンプルな例：タグ・クラス・IDへの適用
• 複雑な例：無効なセレクターとの組み合わせ

シンプルな例：タグ・クラス・IDへの適用

まずは、シンプルな例から見ていきましょう。

以下はHTMLとCSSの例です。

• HTML
• CSS
• 結果

HTML

<p>Paragraph 1</p>
<p class="red">Paragraph 2</p>
<p>Paragraph 3</p>

CSS

p:not(.red) {
  color: blue;
}

結果

このコードでは、class="red"が付いていない<p>要素のテキスト色が青色になります。

複雑な例：無効なセレクターとの組み合わせ

次に、無効なセレクターとの組み合わせを見ていきましょう。

• HTML
• CSS
• 結果

HTML

<p>Paragraph 1</p>
<p disabled>Paragraph 2</p>
<p>Paragraph 3</p>

CSS

p:not([disabled]) {
  color: blue;
}

結果

このコードでは、disabled属性がない<p>要素のテキスト色が青色になります。

「not」セレクタの応用：組み合わせ例

「not」セレクタは、ほかのセレクタと組み合わせても利用できます。

しかしどのような組み合わせが可能なのかを理解のうえ、進みましょう。

• 「not」セレクタと他のセレクタの組み合わせ
• できること
• できないこと
• ポイント：組み合わせ時の注意点

「not」セレクタと他のセレクタの組み合わせ

:not セレクタは CSS において特定の要素を除外する際に使用されるセレクタで、ほかのセレクタと組み合わせることができます。

ただし、その使用には一部制限があります。

• 制限
• 正しい例
• 謝った例

制限

notセレクタの制限として、以下のものは覚えておきましょう。

• 複雑なセレクタやコンビネータ（>, +, ~ など）を入れられない
• 複数のセレクタをカンマで区切れない

正しい例

正しい例はこちら。

/* p タグで class="example" を持っていない要素に適用 */
p:not(.example) {
  color: red;
}

/* div タグで id="container" 以外の要素に適用 */
div:not(#container) {
  border: 1px solid black;
}

誤った例

以下のような場合はエラーとなります。

/* 複雑なセレクタを使用しているためエラー */
:not(p > .example) {
  color: red;
}

/* カンマで区切っているためエラー */
:not(.example1, .example2) {
  color: blue;
}

このように、:not セレクタを使用する際にはその制限を理解しておくことが重要です。適切に使用することで、特定の要素を除外する柔軟なスタイリングが可能になります。

できること

「not」セレクタは、単一のクラスやタグ、またはIDセレクタに対して働きます。

また、属性セレクタや疑似クラスと組み合わせることが可能です。

以下の例では、<p>要素であり、クラスが.redでない要素にスタイルを適用しています。

p:not(.red) {
  color: blue;
}

このコードは、<p>要素のうち.redクラスがついていない要素のテキスト色を青にします。

できないこと

「not」セレクタは、複合セレクタ（例えば、.class1.class2）や、複数のセレクタ（例えば、.class1, .class2）を除外できません。

別々に「not」セレクタを使用しましょう。

/* これは無効 */
:not(.class1.class2) {
  color: blue;
}

/* これは有効 */
:not(.class1):not(.class2) {
  color: blue;
}

「not」セレクタを適用する場合は、その制限と適切な使い方を理解することが必要です。

ポイント：組み合わせ時の注意点

「not」セレクタをほかのセレクタと組み合わせる際の注意点としては、スタイルの適用順序に気をつけること。

CSSはカスケーディング（継承）の性質を持っていますので、同じ要素に対する複数のスタイルルールがある場合、あとに定義されたルールが優先されます。

p {
  color: blue;
}

p:not(.red) {
  color: red;
}

この例では、<p>要素全体に青色を適用した後で、.redクラスがない<p>要素に赤色を適用しています。

結果、.redクラスがない<p>要素の色は赤になります。

ブラウザサポートについて

「not」セレクタは便利な機能ですが、すべてのブラウザでサポートされているわけではありません。

どのブラウザとバージョンでサポートされているのか、また未対応のブラウザにどう対処すれば良いのかを見ていきましょう。

• 対応しているブラウザとバージョン
• 未対応ブラウザの対処法

対応しているブラウザとバージョン

「not」セレクタは、以下のブラウザでサポートされています。

• Chrome
• Firefox
• Safari
• Edge
• Internet Explorer 9以降

未対応ブラウザの対処法

一部の古いブラウザ（例えばInternet Explorer 8以下）では「not」セレクタがサポートされていません。

そのようなブラウザ向けには、以下の方法おを検討しましょう。

• Javascriptを使って同様の機能を実現
• 「not」セレクタを使用しない別のスタイリング手法を検討

まとめ：「not」セレクタで効果的なスタイル指定を

当記事では、以下を説明します。

• 「not」セレクタの基本的な使い方
• 「not」セレクタの応用例
• ほかのセレクタとの組み合わせ方

これらの知識を理解し活用することで、効果的なスタイル指定が可能です。

いろいろ手を動かして、notセレクタを身につけましょう。