title: Avoid conflict with other stylesheets
body: <p>I have a site that uses some <code>css</code> that I can't modify. Then I have other <code>css</code> file that I just want to apply to a specific div.</p>
  
  <p>This stylesheet looks like this:</p>
  
  <pre><code>@charset "UTF-8";
  /* third-party plugins */
  /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
  @import "dev-plugins/mcustomscrollbar/jquery.mCustomScrollbar.css";
  @import "dev-plugins/blueimp/blueimp-gallery.min.css";
  @import "dev-plugins/codemirror/codemirror.css";
  html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }
  body {
    margin: 0;
  }
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  main,
  menu,
  nav,
  section,
  summary {
    display: block;
  }
  audio,
  canvas,
  progress,
  video {
    display: inline-block;
    vertical-align: baseline;
  }
  audio:not([controls]) {
    display: none;
    height: 0;
  }
  [hidden],
  template {
    display: none;
  }
  a {
    background-color: transparent;
  }
  a:active,
  a:hover {
    outline: 0;
  }
  abbr[title] {
    border-bottom: 1px dotted;
  }
  b,
  strong {
    font-weight: bold;
  }
  dfn {
    font-style: italic;
  }
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  mark {
    background: #ff0;
    color: #000;
  }
  </code></pre>
  
  <p>All the site works fine with the original css but If I add this stylesheet then everything breaks. Is there a way I can tag my css stylesheet so it will be applied to my div and its contents?</p>
  
  <p>My div that I just want to affect with this css is:</p>
  
  <pre><code>&lt;!-- page content container --&gt;
  &lt;div class="container"&gt;
  </code></pre>
  
  <p>I just tried <code>&lt;style type="text/css" scoped="true"&gt;</code> but I don't like that approach, I would like to know if I have to add <code>div.container</code> to every item in the css.</p>
  
  <p>Any clue?</p>