# CSSでclassがついていないタグにだけスタイルを当てる方法

URL: https://webrandum.net/css-selector-not-class/
公開日: 2022-09-20
更新日: 2022-09-20
カテゴリー: コーディング
タグ: CSS
出典: Webrandum（著者: サイトウ マサカズ）

コーディングをしていると、classが1つもついていないタグにだけスタイルを当てたい場合があります。

「classがなにもついていない」状態は「デフォルトの状態」とも言い換えられます。

うまく使いこなすことで、余計なスタイルの打ち消しを最小限に抑えつつ、CSSをスッキリさせられます。

## classがついていないタグにスタイルを当てる方法

classがついていないタグにスタイルを当てるためには「`○○:not([class])`」を使います。

`<h2>`タグに対して使う場合は下記のようになります。

```
h2:not([class]) {
  /* classが付いていない場合のスタイル */
}
```

`[class]`はclass属性のことで、`:not()`は否定を表す疑似クラスです。

その2つを組み合わせることで「class属性が存在しない場合に」というセレクタになります。

## 使いどころ

例えばブログ記事やお知らせなど、あとからWYSIWYGエディタやブロックエディタを使って追加するコンテンツにはclassがついていない場合が多いです。

普通は「`.blog`」などの専用のタグを上位に付けておいて、その中のタグを指定する方が一般的だと思います。

```
.blog h2 {
  /* ブログ内のh2にだけ適用されるスタイル */
}
```

しかしこれだと、ブログ外でも同じスタイルを使いたい場合に、同じ内容のスタイルを別途用意したり、セレクタを追加する必要が出てきます。

そこで`:not([class])`指定をしておけば、デフォルトの状態としてスタイルを追加できるので、同じ見た目を簡単に用意できます。

そしてトップページなど、別のスタイルが必要な場合はclassを付けてスタイルを用意します。

classを付けると`:not([class])`は適用されなくなるので、余計な打ち消しが必要ありません。