How to use the not selector correctly in CSS

Question

I understand the basic gist of using :not() in CSS, but it doesn't seem to work for me. I am trying to do something like:

input[type=text][readonly]:not(.class1, .class2) {
background-color: #DDDDDD;
color: #1E1E1E;
}

But this does nto seem to work for me. whenever I read any information on this, it will have examples like input:not(.class1, .class2) {, but nothing between the tag and the :not() part. Am I correct in assuming that the syntax I have written is incorrect? Can I not define the tag element any more if I use :not()?

something from chris: https://css-tricks.com/almanac/selectors/n/not/ — Sachin Kanungo, Sep 18 '15 at 22:15
I read through that previously, it doesnt seem to have the information I am looking for, or am I wrong? — user3334871, Sep 18 '15 at 22:16

Roko C. Buljan · Accepted Answer · 2015-09-18T22:22:36.750

2

Your only issue is that you're passing two selectors inside the :not() use only one per statement.

Currently extended arguments (foo, bar) are not supported by any browser.

Use

:not(.class1):not(.class2)

https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anot

input[type=text][readonly]:not(.class1):not(.class2) {
  background-color: #DDDDDD;
  color: #1E1E1E;
}

<input type=text readonly class="class1">
<input type=text readonly>
<input type=text readonly class="class2">

edited Sep 18 '15 at 22:22

answered Sep 18 '15 at 22:16

Roko C. Buljan

196,159
39
305
313

Thanks! I will try that :) I also heard that `:not()` does not work in IE, is this true? – user3334871 Sep 18 '15 at 22:20
@user3334871 only from version 9 – Roko C. Buljan Sep 18 '15 at 22:20
Does that mean below version 9, or above? I, unfortunately, have to support IE9 with my application for another year or so. – user3334871 Sep 18 '15 at 22:22
1

@user3334871 IE9 will be happy with the above. You can always test. – Roko C. Buljan Sep 18 '15 at 22:26

score 2 · Answer 2 · answered Sep 18 '15 at 22:17

2

:not accepts only simple selectors, and not lists of them.

So your selector should look like:

input[type=text][readonly]:not(.class1):not(.class2) {...}

answered Sep 18 '15 at 22:17

c-smile

26,734
7
59
86

score 2 · Answer 3 · answered Sep 18 '15 at 22:19

Use it combined way:

:not(.class1):not(.class2)

The :not selector is not a function. It is like any other selector taking in the other selector.

Your final CSS should be:

input[type=text][readonly]:not(.class1):not(.class2) {
  /* Styles */
}

Snippet

input[type=text][readonly]:not(.class1):not(.class2) {
  background-color: #DDDDDD;
  color: #1E1E1E;
}

<input type=text readonly class="class1">
<input type=text readonly class="class2">
<input type=text readonly>

How to use the not selector correctly in CSS

3 Answers3