CSSの!importantを上書き(打ち消し・解除)する方法

CSSの!importantを上書き（打ち消し・解除）する方法を紹介します。

広告

WordPressのプラグインのcssファイルに、以下のような記述がありました。

ul.related_post li {
	width: 150px !important;
}

このwidthを変更したかったのですが、プラグインのcssファイルに!importantが使われているため、テーマのcssファイルで同じように書いても上書きされませんでした。

!importantより強い（優先される）書き方はないか、ネットで調べてみました。

詳細なセレクタを書くことで優先される

元のcssより詳細なセレクタを書くことで、そのcssが優先されます。

なお、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を上書きできました。

div.wp-rp_content ul.related_post li {
	width: calc(50% - 20px) !important;
}

広告

おわりに

ちなみにこのプラグインは、WordPress Related Postsです。