>
CSSの!importantを上書きする方法
CSSの!importantを上書きする方法を紹介します。
WordPressのプラグインのcssファイルに、以下のような記述がありました。
ul.related_post li {
width: 150px !important;
}このwidthを変更したかったのですが、プラグインのcssファイルに!importantが使われているため、テーマのcssファイルで同じように書いても上書きされませんでした。
!importantより強い(優先される)書き方はないか、ネットで調べてみました。
詳細なセレクタを書くことで優先される
元のcssより詳細なセレクタを書くことで、そのcssが優先されます。
ソースコード
index.html
<!-- ... -->
<div class="wp_rp_content">
<ul class="related_post wp_rp">
<li>
<a href="https://example.com/1234">
<img src="https://example.com/img/1234.jpg">
</a>
<a href="https://example.com/1234">記事タイトル</a>
</li>
<!-- ... -->ul.related_postの親のdiv.wp-rp_contentを書き足すことで、cssを上書きできました。
style.css
div.wp-rp_content ul.related_post li {
width: calc(50% - 20px) !important;
}