Reset CSS style for specific div

Question

I have a Wordpress that link to a couple of CSS files. I have a specific div which has it's own custom style (not related to the main Wordpress styles). However the Wordpress CSS messes up my custom div's style. Is there any way in HTML/CSS/Javascript/jQuery where I can tell a certain HTML element to simply ignore all previous styles?

I've tried to use CSS reset style sheets ( http://www.cssreset.com/ ), they filter out some of the Wordpress styles, but most of my custom div is still a mess.

Answer 1

You have can always set the specific css style directly on the element. Styles applied directly to a dom element will always take precedence over styles specified in any stylesheet.

Example

<div id="myid"></div>

Apply color style directly to this element via JavaScript

document.getElementById('myid').style.color = "#FF0000";

Only thing that will ever override this if another piece of JavaScript changes said property some time later.

If the stylesheet declares them as important you might need to do this

document.getElementById('myid').style.color = "#FF0000 !important";

Answer 2

You can add more classes on the element you are trying to isolate and select it in CSS by chaining its classes together.

For example, for the following four <div> elements:

 .container { width: 50px; height: 50px; margin: 1em; border: 1px solid black; } /* You can add more properties. */ .red.container { background: red; } /* You can overwrite properties. */ .round.red.container { border-radius: 100%; border-color: red; } /* You can remove properties. */ .blank.round.red.container { border-radius: unset; background: unset; margin: unset; }

 <div class="container"></div> <div class="red container"></div> <div class="round red container"></div> <div class="blank round red container"></div>