How To Isolate a div from public CSS styles?

Question

i have some code for example here in html

 
  
  
Hi it\'s test
  


        
      

Answer 1

Old question, but things have changed a little bit since the accepted answer. There is now a CSSWG-recommended keyword called revert which would be better suited than initial and unset to solve this problem, as it resets an element's property to the value defined in the user agent stylesheet rather than the initial value of the property regardless of which element it's used on. So for instance, a div inside #mydiv will have its display set to block as we would expect and not inline.

You'd have to do this:

#mydiv,
#mydiv::before,
#mydiv::after,
#mydiv *
#mydiv *::before,
#mydiv *::after {
  all: revert;
}

Unfortunately, revert is not supported by any browser other than Safari (for Mac and iOS) at the time of writing.

There is also something else to take in consideration regarding the accepted answer. If you want to style anything inside #mydiv, you need to do so with a selector that is at least as specific as the one you used to unset or revert everything, otherwise it will be overridden by that rule, even if it comes after it in the CSS.

So you'd need to do something like this (note the #mydiv which boost the specificity of the rules):

#mydiv p {
  margin-top: 20px;
}

#mydiv .bg-black {
  background-color: black;
}

// etc.