Home | Blog | CSS Tricks | How to override inline CSS

Apparently this trick has been around for a loooooong time, but I only just learned of it. So I’m pretty sure there are others who will benefit from it as well.

So, let’s say you have a div that looks something like this:

<div class="something" style="background: #999;">Stuff</div>

Maybe this is a div created by a plugin and it inlines those styles through some options on the backend, or you just don’t have access to make changes to the theme files directly. This is a nifty little trick you can use:

div.something[style] {
     background: #678696 !important;
}

That’s all there is to it!

Let me know in the comments below if this helped you or if you’ve had any difficulties getting it to work.