経緯

全ての<p>タグに対してスタイルを当てたかったのですが、単純にやってしまうと、#hoge以下の表示が妙なものになってしまうということがありました。そこで、#hogeに囲まれていない<p>に対してCSSを当てる方法のご紹介です。

やり方

:not(#hoge) p{
  /* 当てたいスタイルシート */
}

解説

:not()()内のセレクタ以外のものにマッチします。

そのため、:not(#hoge) pは「pタグのhogeに含まれていないもの」という意味になります。

まとめ

そもそも、pにスタイルを当てて、#hoge pでオーバーライドしてやるというのが普通のやり方です。とはいえ、後から後から修正を加えていくと、どこかで、影響範囲が大きすぎるため、このようなパッチ的なコードを書いてしまうことがあります。

こういうコードを書いてしまった時はTODOコメントなりを残して、折を見て、リファクタリングしてあげたほうがいいと思います。

とはいえ、:not()指定子は知っておくといろいろなところで使えると思うので、是非、覚えておきましょう。