I am loading a third party HTML with CSS using JQuery load. This is loading in a div as a part of page. I want: Loaded CSS apply only to internal HTML not to external. External CSS won't apply to loaded HTML. JS $('#load-html').load('ThirdPartyHTMLURL'); HTML <html> <head> <link rel="stylesheet" href="styles.css"> </head> <div>Hi</div> <div id="load-html"></div> </html> How can I do this?

Reputation: 407

HTML - Use internal css

I am loading a third party HTML with CSS using JQuery load. This is loading in a div as a part of page. I want:

JS

$('#load-html').load('ThirdPartyHTMLURL');

HTML

<html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <div>Hi</div>
    <div id="load-html"></div>
</html>

How can I do this?

Upvotes: 1

Reputation: 943579

External CSS won't apply to loaded HTML

CSS that applies to a document applies to the whole document.

If you add more HTML to the current document, then the document's stylesheet will apply to it.

Loaded CSS apply only to internal HTML not to external

There was a proposal for a feature that would allow this, but it is not supported in any practical sense.

So there are two ways to achieve this:

Write your CSS carefully so the rules in it apply only to the elements you want it to apply to
Don't put the two sets of HTML in the same document (e.g. use an iframe)

Upvotes: 2