CODEWITHSUNDEEP
htmlcss
dc-deal
dc-deal

Reputation: 362

Block All CSS from parent Elements

Is there a chance to instanciate an HTML Element, like a , where all CSS gets "reset". In this div, there will be no influence of any CSS of the parent elements at all.

In Fact, i search an alternative to an Iframe, which is CSS Save from Parent elements. I Can't edit the Parent element because its a foreign software platform. . Of Course, this platform brings it's own css which is really anoying.

I Can't use an iFrame either because of CORS problems.

Upvotes: 1

Views: 167

Answers (3)

Piemol
Piemol

Reputation: 896

I think there are at least 3 options:

  1. Revert all
    all: revert;
    https://developer.mozilla.org/en-US/docs/Web/CSS/revert#revert_all
    As also commented on your question.

  2. Make rules !important:
    margin-top: 0px !important

  3. Make rules more specific

Your weapon of choice can depend on coding style and the number/complexity of CSS rules to override.

Upvotes: 1

Subhanu Sankar Roy
Subhanu Sankar Roy

Reputation: 21

You could use inline CSS in the child components since Inline has more precedence than External CSS. For Example,

.parentDiv {
  background-color: rgb(59, 59, 59);
  border: 5px solid rgb(255, 238, 0);
}
<div class="parentDiv">
  <div style="margin:1rem; border:1px solid red; color: white;">child 1</div>
  <div style="margin:1rem; border:1px solid blue; color: white;">child 2</div>
  <div style="margin:1rem; border:1px solid green; color: white;">child 3</div>
</div>

The output of the above code will be as follows: The output of the above code will be as follows

Upvotes: 0

Om Nigam
Om Nigam

Reputation: 150

It must be overridden.

Make sure you use !important flag in css style e.g. margin-top: 0px !important What does !important mean in CSS?

You could use an attribute selector, but since that isn't supported by legacy browsers (read IE6 etc), it's better to add a class name

Upvotes: 1

Related Questions