How to apply style sheet with scope?

Question

Is it possible to apply bootstrap.css only to a div element? Example: my global text-hazard class is defined, but for #wrapper I want to apply boostrap.css. Therefore .text-hazard should have the 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, since scoped css is only supported by firefox, one thing you could do (a bit hacky, but it might suit your needs) gives your div a class - something like bootstrap-styles , then you can go through bootstrap css and put .bootstrap-styles in front of each style

It will be much easier if you use some kind of css processor like less or sass, as you can just wrap all bootstrap styles in your class

Alternatively, you can try the jQuery solution: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin

Answer 2

Only for one element you want to do inline style ()

for a repeating class on your site, you must extract this style style into your own CSS / SCSS file and include it.