Separate CSS selectors [duplicate]

This question already has answers here: Closed 11 years ago.

Po开发者_如何学编程ssible Duplicate:

Negative CSS selectors

I would like to separate some CSS on my page, i have a div

<div class="separate">
    <a href="#">a link</a>
</div>

so that when I say

div{
    background:red;
}

all divs except .separate turn red i need a way to do this without iframes

---

This can be done using CSS3's not selector, and will work in all browsers except internet explorer (surprise surprise):

div:not(#seperate){
     background:red;
}

As described here: http://kilianvalkhof.com/2008/css-xhtml/the-css3-not-selector/

As for IE, I don't think this can be done (unless you give every div (except seperate) another class that does this.

For example

<div class="origClass notSeperate"></div>
<div class="seperate></div>
<div class="origClass2 notSeperate"></div>

But that's silly :)

---

just add any style you want to separate but do it after

div{
       background:red;
   }

for example:

.separate{
    background:blue;
}

---

You can set the background for all divs, then override it with no background for the specific class:

div { background-color: red; }
div.separate { background-color: transparent; }

---

You can do this by:

1. Specifying different background color for div.separate divs (that way it will not be overwritten) - see proof in jsfiddle.
2. Using div:not(.separate) selector, but it will be supported only in browsers supporting CSS3 (see more) - see proof in jsfiddle.
3. Use JavaScript (eg. jQuery framework) and set it using CSS3 selectors (that way it will work in all major browsers) - see proof in jsfiddle.

But I suggest solution no. 1, as it is cross-browser and does not require JavaScript.

---

From: Negative CSS selectors

You can do it with the help from javascript (example with jquery):

$j('.not(.separate)>div').css({background:'red'});

OR

You can do something like this:

div { background: red; }
.separate { background: white; }

OR

The you can add an appropriate style class to the divs you want to be red.