1

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.

  • Just like an iFrame.

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.

dc-deal
  • 322
  • 1
  • 3
  • 12
  • Is [this](https://stackoverflow.com/a/15903168/11719787) answer helpful? – Sameer Jul 13 '21 at 06:11
  • 1
    In the question pointed to by @Sameer, which has extensive (though some rather old) discussion of the problem, scroll down to the 2021 answer from Stokely which discusses the CSS all: revert setting. (not supported by IE though). – A Haworth Jul 13 '21 at 07:29

3 Answers3

1

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

Om Nigam
  • 122
  • 1
  • 12
1

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.

Piemol
  • 857
  • 8
  • 17
0

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

cloned
  • 6,346
  • 4
  • 26
  • 38
Subhanu Sankar Roy
  • 21
  • 3
  • yeah but inline css isnt reliable at all since it makes the code crowded and messy and also its harder to write. Btw you can use the code snippet feature provided by stackoverflow instead of showing a picture of the output – I_love_vegetables Jul 13 '21 at 06:37
  • This only works if no style is set with `!important` in the external CSS. Also your example is not the best since border is not shown by default, so if set it on parent div it wouldn't effect the inner divs at all. – cloned Jul 13 '21 at 06:39