Felix Maxime Felix Maxime - 7 months ago 38
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
, 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
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{...}

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

html #chatter{..}
body #chatter div{...}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download