CODEWITHSUNDEEP
htmlcss
Smith
Smith

Reputation: 1490

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

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?

Upvotes: 2

Views: 1256

Answers (2)

segu
segu

Reputation: 321

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;
  }
}

Upvotes: 2

Mr Lister
Mr Lister

Reputation: 46559

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.

Upvotes: 0

Related Questions