【CSS3】特定のclass等を除外する擬似クラス『:not()』

HTML側にclassを追加したりCSSを直書きすることは出来ない環境においてCSSの擬似クラスを利用してコーディングする際、『特定のclassを除外する』CSSを用いてスマートなコーディングが出来ます。
特にWordPress環境では、bodyタグにclassがたくさん記述されるので、その記述のなかのclassを拾い出して除外する手法でコーディングを行ってみました。

CSS3の擬似クラス『:not()』

bodyタグに記述される『.home』に対して、トップページ「以外」に適用したいCSS（トップページだけは除外するCSS）を記述します。
都合良くサブページにはサブページ用のクラスが記述されていれば良いのですが、CMS等によりページが新規追加された際に任意のページ名がclassとして記述される事が多々あります。
HTMLを変更することが出来ない、どんなclass名になるかわからない今後追加されるであろうページに対してCSSを予め設定しておくことを目的とします。

HTMLとCSS

HTML（わかりやすいようにbodyタグではなくdivタグを使います）

CSS

まとめ

「全ページ共通のCSSで文字色を赤にしておいて、トップページのみ黒にすれば良いじゃないか。」と言われればそうなのですが、スマホ対応にしろその他のコーディングにしろ、今回のケースのような単純なものばかりではありません。
レスポンシブなスマホ対応でCSSを上書きしたり、複雑なコーディングがなされている海外テンプレートなどでは、汎用的なCSSに引っ張られてうまくコーディング出来ず「!important」を使用して力技で済ませてしまう事もあります。
除外するCSSを利用することによって、もっと柔軟なコーディングが出来るのではないでしょうか。
例えばWordPressですと、絵文字には「.emoji」とクラス指定されたりしています。絵文字ではないimgタグに対してCSSを適用する場合には重宝すると思います。

幸いなことに、最近の主要ブラウザーでは問題なく使用出来ますので「そう言えば除外出来るんだっけな」と頭の片隅にでも置いておくことで、今後何かの役に立つかもしれません。

この記事を読んだ方はこちらも読まれています

【解決法】Safariではinput要素をCSSの「display: none;」で消すことができない