How to link css file to specific section of page without using iframe?

Question

I am in the process of writing a chrome extension for a specific web site. Web site has already obtained its own css. But my extension adds some content to the page. And I want a specific design - bootstrap.css and bootstrap-theme.css - for that content. So I can't simply link my 2 .css files, because they begin affecting the whole page. I've seen <style scoped></style> but it afects all parent Nodes except mine. Using of <iframe> is impossible: I need content to be written in one page only. So what do I need? That's it:

`<body>
 <div>
  <!-- Here Some page code, that I must not affect with css -->
 </div>
 <div class="myclass" id="need_css">
  <!--Here is my HTML-content, which needs bootstrap css-->
 </div>
</body>`

@BHATIRSHAD — In a Chrome Extension? (And I don't see how Django would help anyway). — Quentin, Oct 28 '14 at 13:49
Take a look at this answer... http://stackoverflow.com/questions/10568065/limit-the-scope-of-bootstrap-styles — Mr Incredible, Oct 28 '14 at 13:57

score 2 · Answer 1 · answered Oct 28 '14 at 13:40

2

Write your CSS using a descendant combinator on every selector.

answered Oct 28 '14 at 13:40

Quentin

914,110
126
1,211
1,335

+1 for brevity, accuracy, and the requirement for the OP to learn CSS! – Christina Oct 28 '14 at 14:34

How to link css file to specific section of page without using iframe?

1 Answers1