how to use namespaces in css?

Question

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?

Answer 1

Two things:

• It sounds like you need a class, not an ID.
• Use embedded stylesheets if you are looking to apply per-page differences between styles.

Using the same ID in this case would definitely be a case of living with broken windows. If you have any control over the situation, you should update the HTML instead of inviting even more confusion later.

Answer 2

Is there anything about the containing elements of the divs that will set them apart from each other. If there is you can prefix your css declaration with the containing element and specify a unique style for both divs.

Eg:

#main
{Style}
.container #main
{Another style}

As people have mentioned, if you have control over the HTML it would be wise to specify a different class for both elements or a unique ID for each of them.