CSSの:not()で特定のセレクタに一致しない要素を選択する方法をわかりやすく解説

:not() はCSSで指定した要素以外の要素に対してスタイルを適用する際に使われる擬似クラスです。:not()の中に指定する条件に合わない要素にのみスタイルを適用することができ、非常に柔軟にスタイルを制御することが可能です。

:not() の値とその効果の一覧

• :not(selector) – 指定されたセレクタ以外の要素にスタイルを適用します。

注意点や関連情報

:not()は、複数の条件を組み合わせたセレクタを除外する際に便利です。ただし、:not() 内で使えるセレクタは1つだけなので、複数条件を使いたい場合は、, で区切る形で指定する必要があります。また、:not()で除外された要素には他のスタイルも適用可能です。

:not()が効かない理由として考えられること

無効なセレクタが:not()内に含まれている

:not()の中に無効なセレクタ（例：疑似要素や複数のセレクタ）が指定されている場合、この擬似クラスは機能しません。:not()は単一のセレクタしか受け付けないため、不正なセレクタが含まれると無効になります。
対策：:not()内に有効な単一のセレクタを指定しているか確認します。例えば、:not(.class)のように単一のクラス名やID、タグを使用します。

共通するCSSコード

.css-sample-container {
    padding: 20px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    max-width: 400px;
}

.css-sample-item {
    padding: 10px;
    margin-bottom: 5px;
    background-color: lightblue;
}

表示例

CSS :not(.exclude)

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item">アイテム 1</div>
    <div class="css-sample-item exclude">アイテム 2 (除外)</div>
    <div class="css-sample-item">アイテム 3</div>
</div>

CSSコード

.css-sample-item:not(.exclude) {
    background-color: lightgreen;
}

表示結果

この例では、.excludeクラスを持つアイテム以外の要素が緑色で表示されます。

まとめ

• :not() は、指定されたセレクタ以外の要素にスタイルを適用するために使用されます。
• 特定のクラスや属性を持つ要素を除外する際に便利です。
• 複数条件を使う場合は、複数の:not()を組み合わせるか、,を使ってセレクタを指定します。