今日はWordPress のテーマ化への記述は少しお休みをして、最近気づいたCSSの詳細度を上げる方法について、書いてみたいと思います。
以前にも書きましたが、CSSの詳細度が苦手です。今までは苦し紛れに!importantを使っていました。これはあまり良くないようです。後々のメンテナンスが難しくなる。パフォーマンスが落ちるなどのディメリットがあります。下記のようなコードがあった時
HTML
<div class= “parent”>
<div class=”chilid next-child“>
コンテンツ
</div>
</div>
childにCSSを書いても効かない時、childの後ろにもう一つclass(next-child)をつけて、そこにCSSを当てようとしますが、それでも効かない。。。理由は色々あると思います。それを見つける方法も大事ですが、あまり考えていても時間ばかりたってしまうので、下記のような方法で解決するケースもあります。CSSに親を含めて指定します。
CSS
.parent .next-child {
color: red;
}
上記をすることにより詳細度が上がり解決できるケースがあります。もちろん、全てではありませんが、一つの方法としていいので思っています。
