remove / reset inherited css from an element

Question

I know this question was asked before, but before marking it as a duplicate, I want to tell you that my situation is a little different from what I found on the internet.

Answer 1

Try this: Create a plain div without any style or content outside of the red div. Now you can use a loop over all styles of the plain div and assign then to your inner div to reset all styles.

Of course this doesn't work if someone assigns styles to all divs (i.e. without using a class. CSS would be div { ... }).

The usual solution for problems like this is to give your div a distinct class. That way, web designers of the sites can adjust the styling of your div to fit into the rest of the design.

Answer 2

From what I understand you want to use a div that inherits from no class but yours. As mentioned in the previous reply you cannot completely reset a div inheritance. However, what worked for me with that issue was to use another element - one that is not frequent and certainly not used in the current html page. A good example, is to use instead of then customize it to look just like your ideal would.

area { background-color : red; }

Answer 3

Only set the relevant / important CSS properties.

Example (only change the attributes which may cause your div to look completely different):

background: #FFF;
border: none;
color: #000;
display: block;
font: initial;
height: auto;
letter-spacing: normal;
line-height: normal;
margin: 0;
padding: 0;
text-transform: none;
visibility: visible;
width: auto;
word-spacing: normal;
z-index: auto;

Choose a very specific selector, such as div#donttouchme, <div id="donttouchme"></div>. Additionally, you can add `!important before every semicolon in the declaration. Your customers are deliberately trying to mess up your lay-out when this option fails.

Answer 4

"resetting" styles for a specific element isn't possible, you'll have to overwrite all styles you don't want/need. if you do this with css directly or using jquery to apply the styles depends on whats easier for you (but i won't recommens using javascript/jquery for this, as it's completely unneccessary).

If your div is some kind of "widget" that can be included into other sites, you could try to wrap it into an iframe. this will "reset" the styles, because its content is another document, but maybe this affects how your widget works (or maybe breaks it completely) so this might not be possible in your case.

Answer 5

You could try overwriting the CSS and use auto

I don't think this will work with color specifically, but I ran into an issue where i had a parent property such as

.parent {
   left: 0px;
}

and then I was able to just define my child with something like

.child {
   left: auto;
}

and it effectively "reset" the property.

Answer 6

One simple approach would be to use the !important modifier in css, but this can be overridden in the same way from users.

Maybe a solution can be achieved with jquery by traversing the entire DOM to find your (re)defined classes and removing / forcing css styles.