Applying a Stylesheet Within One Div Only
css, html
Solution
Sure, in most modern browsers. Put a scoped stylesheet WITHIN the div.
<div class="style-sheet-modern">
<style scoped>
.conflicting-class { ... }
</style>
</div>
You can use `@import` to use external styles. Note, for browsers that don't support it, it will apply the style to the entire page. So you probably just want to add an `id` to the div you want and style with that, for compatibility.
Problem
I have a site I am adding some functionality to. The site is a bit outdated but I am not being paid to overhaul the entire site, just a few pages. Because of this I am using more modern code on these pages but there is still old code on these pages. Because of the old code (which will stay and not be removed) I have some CSS that conflicts. Is it possible to make an entire stylesheet only apply to styles within a div. Example: ``` <div class="style-sheet-modern"> <!-- My Stylesheet applies only within this div --> </div> ``` My first thought was to just rename my css to fall within the div. Example: ``` .style-sheet-modern .conflicting-class{ /* styles */ } ``` However, this isn't desirable because there are a few hundred lines of CSS and I don't want to go through and rename all of my CSS. Also makes it difficult to update in the future. Is there a way to apply an entire stylesheet within a certain div and not anywhere else on the page?