How to avoid CSS impact to dynamically added classes - html

Question

What actually happens: I have a div in a file there is HTML code, which added Dynamically from BackEnd, CSS Classes(which included from Dynamic code) uses CSS from my style.css
What I need: My own CSS should not impact on dynamically added code.
Similar Solution: iframe is a solution but I want to do same using div tag.

Answer 1

I think this is:
<div class="row" style="all:initial"> do some thing</div>

Answer 2

Better you can write you css with parent-child combination to avoid such issues as like below snippet. Here newly added <p> tag has same class .content but parent has different class name as .dynamic from .static.
jQuery(document).ready(function() {
jQuery('.dynamic').html(jQuery(".static").html());
});
.static .content {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="static">
<p class="content">Some content goes here</p>
</div>
<div class="dynamic">
</div>

Answer 3

Three options from my perspective:
1. Use unique classnames
2. Unique ID
If only classes are added, give the parent div an ID and overwrite the css by using the ID.
<div id="uniqueStyle" class="dynamicDiv">
<div class="row clearfix"></div>
<div class="row clearfix"></div>
<div class="row clearfix"></div>
<div class="row clearfix"></div>
</div>
#uniqueStyle{
background: red; //overwrite
}
#uniqueStyle .row{
background: blue; //overwrite
}
3. Using :not
Give the div an unique ID and use the :not selector to exclude it from styling.
<div id="noStyling" class="dynamicDiv">
<div class="row clearfix"></div>
<div class="row clearfix"></div>
<div class="row clearfix"></div>
<div class="row clearfix"></div>
</div>
:not(#noStyling){
background: blue; //set styling of all elements except #noStyling
}
More info about :not selector: https://www.w3schools.com/cssref/sel_not.asp