Felix Maxime Felix Maxime - 2 months ago 12
CSS Question

Localize entire stylesheet to one div?

On my laravel app, I'm using a forum package called "chatter".

This forum is injected into my master layout, so it looks like this:


  • nav bar

  • chatter package

  • footer



It's injected into a container called
<div id="chatter">
, and its styles are found in the style sheet
chatter.css
, which is separate from my main sheet.

The problem is, some of the styles in this sheet are conflicting with my nav and footer. Furthermore, some of the styles in my main sheet are affecting the forum (albeit minimally, so I don't mind making the changes manually).

I can't change the markup, but I can edit the styles.

So how could I make it so that all the styles found in
chatter.css
ONLY apply to what's inside of
<div id="chatter">
?

Answer Source

Add #chatter to every style in chatter.css like this

#chatter table{...}
#chatter tr{...}
#chatter td{...}
etc.

If style is for level above the chatter div then add after like this:

html #chatter{..}
body #chatter div{...}