my HTML page contains a div with an id called ‘main’, and i am including another HTML page in to my HTML page, which contains a div with the same id(‘main’). i need to append a name space to the id(‘main’) of my HTML page.
I am including header,footer from another site and including content from my site to that HTML page. If that other sites uses the same id as my site is using, here the conflict is occurring.
In this HTML page two css files are including. If both of them containing same class with a different style here there is a problem.
I need to apply my css file to my code and another one to remaining code. can any body solve my problem?
I agree with everyone so far, in that there is no native CSS namespace capability and that if you have control (or the desire/capacity) to edit your HTML then that’s the best approach.
One way to automate the process would be to write a script (PERL, PHP, .NET, etc.) to parse the HTML you’re pulling in and replace any existing ID’s or classes with a modified version.
i.e.
<tag id='theID' class='theClass anotherClass'>becomes<tag id='NAMESPACEtheID' class='NAMESPACEtheClass NAMESPACEanotherClass'>You could accomplish this with some creative regular expressions, although it would get trickier if there’s Javascript code that would need to be modified as well.
As far as performance goes, this would be a big hit depending on the size of the file and you’d probably want to cache the result, or rewrite the original file.
Let me know if you decide to go that route, the idea actually sounds a bit intriguing and could have a place in my toolbox!