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;
}