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   I m building and embedded script that people can put it on their sites  This script creates a div with a certain width height and some information in it   My problem is that some websites declare styles for div that are inherited by my div as well   for example   div      background-color red      so if I don t set any background color to my div  it will show red even if I don t want that   The only solutions I come along is to overwrite as many css proprieties  this way my div will show exactly as I want  The problem with this solution is that there are too many css proprieties to overwrite and I want my script to be as light as it can be   So my question is if you know another solution to my problem  It can be in css javascript  jQuery   Thanks

User · Answer

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

User · Answer

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

User · Answer

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   lt div id  donttouchme  gt  lt  div gt   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

User · Answer

As long as they are attributes like classes and ids you can remove them by javascript jQuery class modifiers   document getElementById  MyElement   className         There is no way to remove specific tag CSS other than overriding them  or using another element

User · Answer

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

User · Answer

you may use this below option    lt style gt    div not  no common style         background-color red       lt  style gt    now   if their any place where you do not want to apply default style you can use  no common style  class as class  ex    lt div class  no common style  gt    It will not display in red  lt  div gt

User · Answer

quot Resetting quot  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 what s easier for you  but I wouldn t recommend using JavaScript JQuery for this  as it s completely unnecessary   If your div is some kind of  quot widget quot  that can be included into other sites  you could try to wrap it into an iframe  This will  quot reset quot  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

User · Answer

Technically what you are looking for is the unset value in combination with the shorthand property all   The unset CSS keyword resets a property to its inherited value if it inherits from its parent  and to its initial value if not  In other words  it behaves like the inherit keyword in the first case  and like the initial keyword in the second case  It can be applied to any CSS property  including the CSS shorthand all    customClass        specific attribute      color  unset       otherClass       unset all attributes      all  unset        then set own attributes      color  red     You can use the initial value as well  this will default to the initial browser value   otherClass       unset all attributes      all  initial        then set own attributes      color  red     As an alternative  If possible it is probably good practice to encapsulate the class or id in a kind of namespace   namespace  customClass    color  red      lt div class  quot namespace quot  gt     lt div class  quot customClass quot  gt  lt  div gt   lt  div gt   because of the specificity of the selector this will only influence your own classes It is easier to accomplish this in  quot preprocessor scripting languages quot  like SASS with nesting capabilities   namespace     customClass      color  red

User · Answer

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

[javascript] remove / reset inherited css from an element

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to embedded-script