1

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.

Dima Daniel
  • 23
  • 5
  • Possible duplicate of [How to exclude particular class name in CSS selector?](http://stackoverflow.com/questions/16201948/how-to-exclude-particular-class-name-in-css-selector) – Typo Jan 26 '16 at 10:35
  • @Typo — That requires the original CSS be modified, which the question says can't be done. (It isn't helped that the question title basically describes the opposite of the problem the rest of the question actually describes) – Quentin Jan 26 '16 at 10:36
  • use jQuery tag selector to apply css, for all divs. eg. $("div").css("border","1px solid #000"); – ameenulla0007 Jan 26 '16 at 10:37
  • @ameenulla0007 – For every single CSS property there is? That's going to be a lot of JS and will be a race to keep up with new properties that are introduced by browser vendors as time move on. – Quentin Jan 26 '16 at 10:52

3 Answers3

1

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

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
0

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.

varun
  • 4,522
  • 33
  • 28
  • "Try using !important after your css attributes, they should override the inherited styles." — Except the ones which are `!important` themselves, and the ones that you don't explicitly reset. Going through every property that could be applied to every element in the advert is going to result in a rather bloated stylesheet. – Quentin Jan 26 '16 at 10:51
  • Yes, it seems like the best way to go is to use iframe. I didn't use it because i need to have the search parameters in the url. But maybe i can work around that. There are not a lot of problems when i put bootstrap 3 css as the original css or some css from other site. But if the client who uses same class names as me in their css files with !important then it won't look good. – Dima Daniel Jan 26 '16 at 11:02
0

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.

Maciej Paprocki
  • 1,230
  • 20
  • 29