How to apply scoped stylesheet?

Question

Is there any way I can apply bootstrap.css only on a div element ? Example: my global class text-danger is defined, but for the #wrapper I want to apply boostrap.css. So .text-danger should have now color: #a94442;

<style>
 .text-danger {
   color:blue;
 }
</style>

<div id="wrapper">
  <style scoped>
    @import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css");
  </style>

  <p class="text-danger">Some random text</p>
</div>

<p class="text-danger">Outer text</p>

Answer 1

Based on your comments, as scoped css is only supported by firefox, one thing you could do (bit hacky but it may suit your needs) is give your div a class - something like bootstrap-styles then you can go through the bootstrap css file and put .bootstrap-styles before each style

This will be a lot easier if you are using some sort of css processor like less or sass as you can just wrap all the bootstrap styles in your class

Other than this, you may try a jQuery solution: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin