I have a site that uses some `css` that I can't modify. Then I have other `css` file that I just want to apply to a specific div.

This stylesheet looks like this:

```
@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;
}

```

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?

My div that I just want to affect with this css is:

```
<!-- page content container -->
<div class="container">

```

I just tried `<style type="text/css" scoped="true">` but I don't like that approach, I would like to know if I have to add `div.container` to every item in the css.

Any clue?