Separate CSS selectors

Question

Possible 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

score 1 · Answer 1 · answered Jul 17 '11 at 19:06

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 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 :)

Actually good idea, but wrong selector :) You should write `.seperate`, not `#seperate`. — Tadeck, Jul 17 '11 at 19:14

score 1 · Answer 2 · answered Jul 17 '11 at 19:08

1

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

div{
       background:red;
   }

for example:

.separate{
    background:blue;
}

answered Jul 17 '11 at 19:08

kleinohad

quite messy solution, when it comes to modifying only div's. Why not `div.separate` instead of `.separate`? – Tadeck Jul 17 '11 at 19:16
`div.separate` is useless if the separate-class was set on div's only. `.separate` is sufficient, because CSS selectors are parsed from right to left. So the client searches for all occurrences of `.separate` and after that searches again for all div's and then returning only the ones with the specified class. That would decrease CSS-parsing time. And styling all div's first, then styling the exceptions was the common practise until CSS3, which still isn't fully supported by browsers. This is described in @Guffa's answer. – feeela Jul 17 '11 at 19:27

score 1 · Answer 3 · answered Jul 17 '11 at 19:09

1

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; }

answered Jul 17 '11 at 19:09

Guffa

score 0 · Answer 4 · answered Jul 17 '11 at 19:08

You can do this by:

Specifying different background color for div.separate divs (that way it will not be overwritten) - see proof in jsfiddle.
Using div:not(.separate) selector, but it will be supported only in browsers supporting CSS3 (see more) - see proof in jsfiddle.
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.

score 0 · Answer 5 · edited May 23 '17 at 12:19

0

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.

edited May 23 '17 at 12:19

Community

answered Jul 17 '11 at 19:08

evan

5 Answers5