Create a div that doesn't allow outside CSS to affect inside elements

Question

I have to integrate my webpage code into a big project. Entire project code is inside container div which is included inside <main> tag. When I add the container div in <main> tag, the project css overwrites my css. Is there a way where we can write a div that creates its own css environment and stops from outside css affecting inner tags?

div {all: unset; other_properties: and_values; ... (of your choice)} — VXp, Sep 13 '18 at 06:53

segu · Answer 1 · 2018-09-13T07:37:48.130

2

Option 1: iframe will scope your html, but you will not be able to access dom.

Option 2:

reset CSS with

.your-div{
  all: initial;
  * {
    all: unset;
  }
}

edited Sep 13 '18 at 07:37

answered Sep 13 '18 at 06:48

segu

321
2
12

Current requirement i need to have a div. – Smith Sep 13 '18 at 07:08

score 0 · Answer 2 · answered Sep 13 '18 at 06:49

You can use an iframe with the srcdoc attribute. Things inside an iframe are immune to outside css!

iframe {display:block; border:none}

/* css to demonstrate the immune div */

div {color:red; background:yellow; border:solid;}

<div>This is a standard div</div>
<iframe srcdoc="<div>This is a framed div, immune to css</div>"></iframe>

See <iframe> on MDN for more info and pitfalls.

Create a div that doesn't allow outside CSS to affect inside elements

2 Answers2