Using the CSS3 :not selector with IE - using Prototype

I need to add a CSS style to a content <div>, which is pr开发者_JS百科esent on all pages of my site. However, I do not want to use the new style on the homepage.

All the pages on the site have a similar structure: a header <div> with navigation bar, followed by a content <div> with the page's contents.

Best I could think of is to add a wrapper div directly under the content div on the homepage, like so...

<div id="content">
   <div id="homepage_content">
      ....homepage content....

Then I can apply my style to the entire content <div> using the :not selector, so the elements under homepage_content are not included.

This won't work in IE. I've seen jQuery workarounds for it, but we are using Prototype on my site.

Anyone have an idea for me?

Thanks!

---

NOT is in fact not an option yet.

There are certainly Prototype based workarounds for this as well, but a pure CSS solution would probably be much preferable.

Maybe a workaround by adding another, invisible container around the other objects is an option?

<div id="content">
   <div class="other_elements">
    .... the other elements you want to style ....
   </div>
   <div id="homepage_content">
      ....homepage content....
</div>

and then addressing the other objects like

#content .other_elements elementname {  ...... }

whether this is possible, will depend on your CSS structure.

---

You could use the following HTML on the home page:

<div id="content" class="home-page">

And the following HTML on every other page:

<div id="content" class="regular-page">

Then add your CSS style like this:

#content.regular-page {
    /* Styles here */
}