【CSS】:not()で一部の要素を適用しない方法

CSSでスタイルを書いていると、一部の要素を除外したいと思うことがあります。
そういう時にわざわざ個別にclassを設定するのも手間ですよね。

今回は:not()を使って特定の要素を除外する備忘録です。

よく使う除外する5つの方法

基本的な使い方は:not()の括弧内に除外したい要素を指定していきます。

タグを除外する

CSS

/* h1タグを適用させない */ :not(h1) { プロパティ: 値; } /* divタグを適用させない */ :not(div) { プロパティ: 値; } /* Pタグを適用させない */ :not(p) { プロパティ: 値; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14

/* h1タグを適用させない */ :not(h1) {   プロパティ: 値; }   /* divタグを適用させない */ :not(div) {   プロパティ: 値; }   /* Pタグを適用させない */ :not(p) {   プロパティ: 値; }

IDを除外する

CSS

/* 指定の#idを適用させない */ :not(#id) { プロパティ: 値; }

1 2 3 4

/* 指定の#idを適用させない */ :not(#id) {   プロパティ: 値; }

classを除外する

CSS

/* 指定の.classを適用させない */ :not(.class) { プロパティ: 値; }

1 2 3 4

/* 指定の.classを適用させない */ :not(.class) {   プロパティ: 値; }

擬似クラスを除外する

CSS

/* hoverを適用させない */ :not(:hover) { プロパティ: 値; } /* first-child（最初の要素）を適用させない */ :not(:first-child) { プロパティ: 値; } /* first-child（最後の要素）を適用させない */ :not(:last-child) { プロパティ: 値; } /* n番目の要素を適用させない */ :not(:nth-child(3)) { プロパティ: 値; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

/* hoverを適用させない */ :not(:hover) {   プロパティ: 値; }   /* first-child（最初の要素）を適用させない */ :not(:first-child) {   プロパティ: 値; }   /* first-child（最後の要素）を適用させない */ :not(:last-child) {   プロパティ: 値; }   /* n番目の要素を適用させない */ :not(:nth-child(3)) {   プロパティ: 値; }

属性セレクタを除外する

CSS

/* href属性を適用させない */ :not([href]) { プロパティ: 値; } /* href属性でexample.comを含むものは適用させない */ :not([href*="example.com"]{ プロパティ: 値; } /* type属性でtextを含むものは適用させない */ :not([type="text"]) { プロパティ: 値; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14

/* href属性を適用させない */ :not([href]) {   プロパティ: 値; }   /* href属性でexample.comを含むものは適用させない */ :not([href*="example.com"]{   プロパティ: 値; }   /* type属性でtextを含むものは適用させない */ :not([type="text"]) {   プロパティ: 値; }

まとめ

以上が特定の要素を除外する5つの方法でした。
今回はよく使うものをまとめたので、必要に応じて要素は書きかえてみてください。

疑似クラスをまとめた記事もあるので、合わせて読むと記述の幅が広がるかもしれません。

関連記事

【CSS】何番目・奇数偶数などの要素を指定する疑似クラスのまとめ