Search code examples
htmlcssstylesstylesheet

Limit Stylesheet to one tag and descendents

I want to use twitter bootstrap for some site I am working on. This site requires a pre-set template to be used for certain parts of the page.

If I include the twitter bootstrap stylesheet it messes up the original template.

I want to include the external bootstrap.cc stylesheet but make it work only on tags which are a descendent of class="mycontent"

<html>
<link href="original stylsheet.css">
<link href="bootstrap.css">
...
...
<div class="header">
original stlesheet to be used here
</div>
<div class="mycontent">
bootstrap css to work for all descendents of my content
</div>

I know one way is to edit the css and add .mycontent before each and every tag. But I was wondering if there was a smarter solution

Solution

  • Scoped CSS

    If scope attribute is present, then <style> applies only to its parent element.

    <div>
  <style scoped>
  /* your css here */
  <style>
  <!-- content -->
</div>

    It lacks of browser support, but there is a polyfill: jQuery Scoped CSS plugin.

    Additional reading: Saving the Day with Scoped CSS.

    Current browser support: http://caniuse.com/#feat=style-scoped