Applying CSS to specific section of page

Question

I need to apply a pre-existing style-sheet only to elements within a specific div, is this possible?

Long, drawn-out reason: We have a page fragment with a css file. We now want to include this page fragment inside another page. Doing so is easy enough but its css and the new page's css conflict. Editing either style-sheet heavily would be difficult as both are large and need to maintain compatibility with how they were before. This brings me to the above question.

@Šime Vidas: I was thinking about that but that would get very messy very quick with our js and controllers. It would still be easier than messing with the css in our case. I am still fishing for a simple & clean solution. — Bob Roberts
– Bob Roberts, Commented Oct 19, 2011 at 18:22
i'd give the wapping div an id or class and add that to every rule in the new css. maybe you can use a replace or regex to add it to every rule at once — Andy
– Andy, Commented Oct 19, 2011 at 18:22
You could have the server modify the css on the fly, and add "#fragment " before every rule, using some regex replace. — Gerben
– Gerben, Commented Oct 19, 2011 at 18:30
@Šime Vidas: Well it seems like your comment may be the winner. Turn that into an answer if you could. — Bob Roberts
– Bob Roberts, Commented Oct 19, 2011 at 19:32

Šime Vidas · Accepted Answer · 2011-10-19 20:39:50Z

5

Place an IFRAME on the page and load the fragment inside it.

<iframe id="section" src="fragment.html"></iframe>

answered Oct 19, 2011 at 20:39

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bob Roberts Over a year ago

Not the ideal solution but certainly the one that contains the changes the most.

Andy · Accepted Answer · 2011-10-19 18:36:57Z

5

do you know http://lesscss.org/ ?
it supports nested rules.
you could nest your entire new css in a new rule (from the class of your div) like that:

div#the-new-div{
   div{

   }
   /*** your entire css ***/
}

less will compile it to div#the-new-div div{...}
i know you probably don't want to implement less into your site but there are standalone less compiler like that: http://digitalpbk.com/less-css/less-css-compiler-windows-lesscexe. then just insert the compiled css

answered Oct 19, 2011 at 18:36

Andy

30.2k9 gold badges43 silver badges59 bronze badges

2 Comments

Bob Roberts Over a year ago

That's neat. That will warrant another look next time a personal project comes along.

Andy Over a year ago

Yea I used it in one of my projects already and it works really well. Had a smile on my face all the time :)

Seybsen · Accepted Answer · 2011-10-19 18:22:15Z

2

No you cannot.

You need to change the CSS which should be used in your <div>. For example like this:

Add an id to your <div> e.g. <div id="foo"> and prefix your CSS rules in the stylesheet you want to use for that <div> with #foo.

Disadvantage: you need to add the same id to your other site's html-tag.

answered Oct 19, 2011 at 18:22

Seybsen

15.6k4 gold badges45 silver badges76 bronze badges

1 Comment

Bob Roberts Over a year ago

That is a possible solution but I am afraid there are simply too many rules for that to look right (and if someone adds something to site A's css and doesn't prefix it then site B has an issue

Collectives™ on Stack Overflow

Applying CSS to specific section of page

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related