Apply CSS Style on all elements except with a SPECIFIC ID

Question

CSS Code(what I need)

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

<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?

Vucko · Accepted Answer · 2017-06-20T07:59:14.620

108

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>

edited Jun 20 '17 at 07:59

answered Oct 19 '13 at 09:52

Vucko

vucko, I am pleased to get a solution. But if I had to check it say on the basis of the `name` instead of `id` attribute then what should I do??? – Rajesh Paul Oct 19 '13 at 10:12
1

@RajeshPaul you're welcome. `:not` selector is a **CSS3** selector so it's not supported by **IE8 or less**, see [caniuse](http://caniuse.com/css-sel3). – Vucko Oct 19 '13 at 10:19
So is there any way for the `name`-check using CSS2? – Rajesh Paul Oct 19 '13 at 10:23
@RajeshPaul it is if you use a JS plugin like [selectivizr](http://selectivizr.com/). – Vucko Oct 19 '13 at 10:32
@Vucko Your Js fiddle is not working, can you please update it. – always-a-learner Jun 19 '17 at 12:39

Tom Heard · Answer 2 · 2013-10-19T10:44:55.383

20

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

edited Oct 19 '13 at 10:44

answered Oct 19 '13 at 09:52

Tom Heard

Tom, Coincidentally I asked for `id`-validation. But say I needed to check an inequality on the `name`-attribute of the element, then what should I do? – Rajesh Paul Oct 19 '13 at 10:14
why it doesn't work for me in `*:not(#email)`, that is, when used for all elements – Dec 09 '14 at 14:49
1

@nakinlaulu I have no idea why that doesn't work (it doesn't for me either) but you can do something like `body *:not(#email)` and it will work. See http://jsfiddle.net/1ty8ns3k/1, sorry I couldn't give a better answer – Tom Heard Dec 16 '14 at 00:31

score 2 · Answer 3 · answered Oct 19 '13 at 09:52

2

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

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

answered Oct 19 '13 at 09:52