Applying a Stylesheet Within One Div Only

Question

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?

Answer 1

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.