How to use the not selector correctly in CSS [duplicate]

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: css-tricks.com/almanac/selectors/n/not — Sachin Kanungo
– Sachin Kanungo, Commented Sep 18, 2015 at 22:15
I read through that previously, it doesnt seem to have the information I am looking for, or am I wrong? — user3334871
– user3334871, Commented Sep 18, 2015 at 22:16

Roko C. Buljan · Accepted Answer · 2015-09-18 22:22:36Z

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, 2015 at 22:22

answered Sep 18, 2015 at 22:16

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3334871 Over a year ago

Thanks! I will try that :) I also heard that :not() does not work in IE, is this true?

Roko C. Buljan Over a year ago

@user3334871 only from version 9

user3334871 Over a year ago

Does that mean below version 9, or above? I, unfortunately, have to support IE9 with my application for another year or so.

Roko C. Buljan Over a year ago

@user3334871 IE9 will be happy with the above. You can always test.

c-smile · Accepted Answer · 2015-09-18 22:17:28Z

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, 2015 at 22:17

c-smile

27.6k8 gold badges66 silver badges91 bronze badges

Comments

Praveen Kumar Purushothaman · Accepted Answer · 2015-09-18 22:19:42Z

2

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>

answered Sep 18, 2015 at 22:19

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Collectives™ on Stack Overflow

How to use the not selector correctly in CSS [duplicate]

3 Answers 3

4 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Linked

Related