How to block outer CSS to modify div

Question

Scenario

Visit this link for Codehttps://plnkr.co/edit/yjGTX0XvOZIqL17Co2MF?p=info

I do not want my innerDiv to get modified by CSS in outerDiv. Is there some way to achieve this?

(contents(HTML) of InnerDiv are loaded via ajax call , and the resulting page already has its own CSS and both CSS files are messing up all the layouts and formats)

No because the main Div is its parent, and a child element always inherits some of its parents basic properties (content-related mostly) unless told otherwise. If you want the child element to have different properties, you'd have to manually set them. — Vig, Nov 21 '17 at 10:11
Also, Iframe is not suitable for your case. It doesn't even make sense including a whole page just to get that result. — Vig, Nov 21 '17 at 10:11
Kelvin, yes I know it , but that's the hard way.I have to do a lot of work to achieve this. — Deepanshu, Nov 21 '17 at 10:12
@Deepanshu You may not like Kelvin's explanation, but I believe that it is the correct answer to your question, which is "no, it can't be done". There is no easy way! — Jonathan Nicol, Nov 21 '17 at 10:24
@Jonathan-Nicol , its not like 'I do not like his answer' , all I want to know was 'if there exist some easy way to do this'. — Deepanshu, Nov 21 '17 at 10:30
Sorry, I misread the tone of your comment. Your only options if you want to avoid CSS conflicts are to make sure your AJAX loaded content doesn't match selectors in the parent document's stylesheet, or override any conflicting rules with more specific selectors, as described in the existing answers to this question. — Jonathan Nicol, Nov 21 '17 at 10:32
@Jonathan-Nicol Sir that is the real issue, I got your point, but the problem is my InnerDiv is having 20-30 CSS files each having 300-400+ lines of code, same goes with Outer Div. Now both are conflicting because of loading both on same page. (both were being loaded on different pages before) — Deepanshu, Nov 21 '17 at 10:36

score 0 · Answer 1 · answered Nov 21 '17 at 10:28

0

You can override the properties in you innerdiv; here I have overwritten the background-color property of the outerdiv

#outerMostDiv {background-color:red;}
#innerDiv {background-color:yellow;}

<div id="outerMostDiv">
<!-- SOME CSS HERE (say Outer CSS)-->
   outer div
    <div id="innerDiv">
    <!-- some CSS HERE -->
    innerdiv
    </div>
</div>

answered Nov 21 '17 at 10:28

Rajkumar Somasundaram

1,225
2
10
20

I got your point, but the problem is my InnerDiv is having 20-30 CSS files each having 300-400+ lines of code, same goes for Outer Div. Now both are conflicting because of loading both on same page. – Deepanshu Nov 21 '17 at 10:34
20-30 files? M sorry , I dont it is a good practise to have dependencies in 20 different css files; How will u even debug; My advice, please consolidate those numerous files; else u might end up with spaghetti code. or a hacky route: find all the css (of the innerdiv) that shouldnt be overriden, put them in separate css file and append this css file after all other files. – Rajkumar Somasundaram Nov 21 '17 at 10:38

FelipeAls · Accepted Answer · 2017-11-21T11:37:27.463

From a previous answer: all: initial isn't supported by Edge (Safari is finally OK)

So you can reset manually a hundred of properties if you really really really want to be sure (forget the most obscure ones you know you don't use. If you're a third party, well no luck).
You can (should) add the !important modifier (that's one of those cases where it isn't possible to do in some other way... Fine for me at least)
You can also add a whole lot of specificity to your selectors by adding an id to your component's parent and prefix each of your selectors with that id: #myComponent.my-component .my-component-descendant { color: #333 !important; }. If your existing CSS already uses id (meh), you can go even further (lower, quality wise) and use the same id multiple times in a single selector. #myComponent#myComponent#myComponent.my-component .my-component-descendant { color: #333 !important; }. What is one the crappiest thing you can imagine in a sane project is also a powerful tool when you need to add "enough" specificity.

Food for thought: the modern way of setting box-sizing by setting it on :root and then letting inheritance do its job can be helpful (or not) https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
Advantage: if you set another value on a descendant, descendants of the latter will inherit from it. You now have a whole part of your DOM inheriting from another value.

How to block outer CSS to modify div

2 Answers2