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

コーディングをしていると、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])は適用されなくなるので、余計な打ち消しが必要ありません。