CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dima Daniel
Dima Daniel

Reputation: 23

How to not apply CSS file on a <div>? (Without changing the original CSS file.)

I'm making an ads importer that can be used on other sites to show/search ads. The imported content should have it's own styling.

Code example:

Header:

<link rel="stylesheet" type="text/css" href="css/bootstrap.css" /><!-- Originaly on site -->

<link rel="stylesheet" href="http://www.example.com/css/custom.css" type="text/css"><!-- Import -->
<script type="text/javascript" src="http://www.example.com/jquery/jquery-min.js"></script><!-- Import -->
<script type="text/javascript" src="http://www.example.com/import.js"></script><!-- Import -->

Body:

<!-- Import stuff into wrapperJSON-->
<div class="col-12-sm">
  <div id="content" class="page">
    <div class="wrapper wrapperJSON" data-id="8" >            
    </div>
  </div>
</div>

My problem is that the original CSS from the site applies to my import div too. I can't edit the original CSS, and it changes from site to site.

What i need is that the original CSS should apply to everything except the import div (.wrapperJSON). Is this somehow possible, i can't find a solution for it anywhere.

Upvotes: 1

Views: 2221

Answers (3)

Maciej Paprocki
Maciej Paprocki

Reputation: 1379

there are 3 solutions I can think of now.

One is iframe that will sandbox div. It might unfortunately also remove your possibility to access inside elements.

Second. Prefix all your css declarations with element id (so .class will become #id .class). It's really easy to do in less or sass.

Third. Inline styles using javascript on client or server side. You can quite easilly parse css to json array and then apply it to each element using document/querySelectorAll().

EDIT: sorry I just read question again. You can use 2,3-rd of those three answers with css reset of all attributes. The easiest way to do that however will be to use iframe, and to pass all the communication between those two through ajax/websockets.

Upvotes: 0

varun
varun

Reputation: 4650

Try using !important after your css attributes, they should override the inherited styles. The css cascading rules are a bit complex

In short: more specific rules override more general ones. Specificity is defined based on how many IDs, classes, and element names are involved, as well as whether the !important declaration was used. When multiple rules of the same "specificity level" exist, whichever one appears last wins.

Upvotes: 0

Quentin
Quentin

Reputation: 943579

Keep the advert in an iframe. That will sandbox it from the rest of the document.

Upvotes: 1

Related Questions