Using the CSS3 :not selector with IE - using Prototype

Question

I need to add a CSS style to a content <div>, which is present 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!

Answer 1

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.

Answer 2

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 */
}