Apply CSS Style on all elements except with a SPECIFIC ID

CSS Code(what I need)

<style>
    div[id!='div1']// I actually needed an inequality operator for NOT EQUAL TO
    {
        font-size:40px;
    }
</style>

HTML code

<body>
    <div>abc</div>
    <div>def</div>
    <div id='div1'>ghi</div>
</body>

The CSS didn't work as I intended.

I actually wanted to define the style for all <div>-elements except the one with id='div1'.

How can I do that?


Use the :not selector:

div:not(#bar){
    color:red;
}
<div>foo</div>
<div id="bar">bar</div>

Update : name instead of ID:

div:not([name="bar"]){
    color:red;
}
<div>foo</div>
<div name="bar">bar</div>

Update: CSS2 selector, similar answer to Tom Heard-s:

div{
    color:red;
}

div[name="bar"]{
    color:blue;
}
<div>foo</div>
<div name="bar">bar</div>

Also, see selectivizr


CSS3 solution:

div:not(#div1)

CSS2 solution:

div {
    color: red;
}

div#div1 {
    color: inherit;
}

By name:

CSS3 solution:

div:not([name=div1]) {
    color: red;
}

CSS2 Solution (note not supported in IE6 - but who cares anymore):

div {
    color: red;
}

div[name=div1] {
    color: inherit;
}

If you are only to target browsers supporting CSS3 selectors you could do this:

div:not(#div1) {
...my styles...
}