[CSS] 指定した要素の子要素だけを除外するセレクタ【初心者向け】

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

コード

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

解説

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

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

注意点

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

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

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