経緯
全ての<p>
タグに対してスタイルを当てたかったのですが、単純にやってしまうと、#hoge
以下の表示が妙なものになってしまうということがありました。そこで、#hoge
に囲まれていない<p>
に対してCSSを当てる方法のご紹介です。
やり方
:not(#hoge) p{ /* 当てたいスタイルシート */ }
解説
:not()
は()
内のセレクタ以外のものにマッチします。
そのため、:not(#hoge) p
は「pタグのhogeに含まれていないもの」という意味になります。
まとめ
そもそも、p
にスタイルを当てて、#hoge p
でオーバーライドしてやるというのが普通のやり方です。とはいえ、後から後から修正を加えていくと、どこかで、影響範囲が大きすぎるため、このようなパッチ的なコードを書いてしまうことがあります。
こういうコードを書いてしまった時はTODOコメントなりを残して、折を見て、リファクタリングしてあげたほうがいいと思います。
とはいえ、:not()
指定子は知っておくといろいろなところで使えると思うので、是非、覚えておきましょう。
コメントを残す