A. Stam A. Stam - 1 month ago 22
CSS Question

How to ignore <p> CSS rules in wordpress theme?

I'm editing the stylesheet of my Wordpress blog. I've installed a theme that's otherwise pretty cool, but its styling of blockquotes is very ugly.

I can edit the appearance of the

<blockquote></blockquote>
object just fine. The problem is that the paragraph that I put in between those quotes is also assigned
<p></p>
tags by Wordpress, and those also take properties from the stylesheet. The theme has very intricate styling for the
<p>
tag, and because of that, those take priority over the things I'm trying to make it do.

Sample code:

<p>Text here</p>
<blockquote><p>Quote here</p></blockquote>
<p>More text</p>


Sample CSS:

blockquote {
/* styling here */
}
blockquote p {
/* whatever I put here is overwritten by other stylesheet rules */
}
.post-video .video-div p {
/* stylesheet from my theme that has more levels than my own added style rules, so takes priority */
}


Basically, the
.post-video .video-div p
rules overwrite my own
blockquote p
rules, so I can't change the appearance. I also don't really want to mess with all those theme-specified classes. I know I could write
.post-video .video-div blockquote p
and be more important than the standard rules, but I don't know what those classes do and would rather not mess with them.

Any suggestions how to solve this?

Answer

Use !important after your styling.

blockquote p {
   background: red !important;
}

!important will force the browser to honor your CSS and use it over any other CSS written for that element.

Comments