16

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?

L84
  • 45,514
  • 58
  • 177
  • 257
  • For external CSS files: https://stackoverflow.com/questions/17667874/limit-scope-of-external-css-to-only-a-specific-element Also consider using Sass which makes the scoping syntax easy. – Ciro Santilli OurBigBook.com Dec 19 '19 at 11:04

2 Answers2

12

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.

rvighne
  • 20,755
  • 11
  • 51
  • 73
  • 2
    Thanks. Only issue is it is only supported in Firefox. Chrome supports it but it has to be enabled manually. -[Source](http://caniuse.com/#search=scoped) – L84 Feb 01 '14 at 01:38
  • I did find a [jQuery Plugin](https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin) that enables it in non-supported browsers. – L84 Feb 01 '14 at 01:42
  • @Lynda Sorry, didn't know about the abysmal support. The plugin looks great! I'd say go ahead and use it. – rvighne Feb 01 '14 at 01:42
  • I am going to give it a try. We will see what happens. => – L84 Feb 01 '14 at 01:43
  • Crome ☹ It was partially implemented behind a flag, but was later retracted due to high code complexity. ☹ https://www.chromestatus.com/feature/5374137958662144 – Yevgeniy Afanasyev Dec 11 '17 at 02:56
  • 5
    In 2018, scoped stylesheets are not [supported](https://caniuse.com/#feat=style-scoped) by **any** browser (except Firefox and then only if the user enables the experimental feature in their preferences). – Quentin Jun 13 '18 at 12:15
  • Scoped is now deprecated: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style :-( – Ciro Santilli OurBigBook.com Dec 19 '19 at 11:05
  • isn't it possible to apply a stylesheet file within a div? – Alireza Mahzad Mar 19 '22 at 22:55
4

Why not give the <div> an ID?

Then you could use specificity to override just the classes/ids that are in that div?

IE: 

<div id="style-sheet-modern"> 
    <div class="my-class"></div>
    <div class="etc"></div>
</div>

You could then target all styles inside the "modern" div like this: 

#style-sheet-modern .my-class{
    color:black;
} 
#style-sheet-modern .etc {}

There would be no browser support issues.

If you're using something like less or sass – you could even have it in a separate file named "style-sheet-modern.less" or whatever you want it named and @import it at the bottom of your main styles file. This include would need to come last in the file so that it will override the other styles that could be applied to those same styles.

You could use a wildcard to reset all the styles inside the #style-sheet-modern as well if necessary like this:

#style-sheet-modern * {
    reset: stuff; //obviously not the actual css
}

That reset for those styles would be the first thing in your 'style-sheet-modern.*ss' file.

And as I mentioned before, no browser support issues.

Jacques ジャック
  • 3,682
  • 2
  • 20
  • 43
  • The one stylesheet has hundreds of classes, etc. I would have to apply it to each one. Not a fun task. Also you said: `@import it at the bottom of your main styles.css`. Unless things have changed you cannot use `@import` anywhere in your stylesheet except at the top of the stylesheet (before any styles). Not the bottom. – L84 Feb 01 '14 at 02:24
  • Haha, you are correct about the @import at the bottom. I generally write in LESS, which you can import at the bottom. However, if you put it all(the css) at the bottom, it would work. Here is a fiddle. (the wildcard thing resets all the styles that are inside the div with the specified ID.) http://jsfiddle.net/jvincilione/dC3Jj/ – Jacques ジャック Feb 01 '14 at 02:39
  • So essentially, preface all the "modern" classes with the ID and make sure they're at the bottom with a css reset only on objects within that object. – Jacques ジャック Feb 01 '14 at 02:42