CODEWITHSUNDEEP
csshtml
que1326
que1326

Reputation: 2325

How to apply scoped stylesheet?

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>

Upvotes: 3

Views: 2689

Answers (2)

Pete
Pete

Reputation: 58422

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

Upvotes: 1

fedesc
fedesc

Reputation: 2610

For only one element you would want to do inline style ()

for a repetitive class throughout your site, you should extract that class styling to a custom CSS/SCSS file of your own and include it.

Upvotes: 0

Related Questions