javascript - Load an external CSS for a specific DIV

Question

So basically I have a page that has it's own CSS. On my server I have a folder of different CSS style files, so I want to have a "preview" window on my page for them. Can I somehow, maybe using javascript, apply an external CSS file only to a certain DIV, not to the entire page so I can get a "preview" of the custom CSS file? I'd rather not use iframes.

Answer 1

Like Quentin said, you can use descendent selector to limit the scope. Something like less can help a lot. For example, I would like to have "bootstrap.css" applies only to #MyDiv, in "my.less":

#MyDiv {
  @import "bootstrap.less";
}

"bootstrap.css" should be renamed (or linked) to "bootstrap.less". Run:

lessc my.less my.css

would add #MyDiv to every selectors in the imported file.