CSS selector for not having classes

Question

I am using selector to select all elements not having one class:

.list th:not(.foo) {
  /* some rules */
}

How can I apply this to more than one class?

.list th:not(.foo), .list th:not(.bar) {
  /* some rules */
}

The CSS above will not of course do that, I need something like this pseudo:

.list th:not(.foo and .bar)

Is it possible in CSS and how?

4 votes for this question ? first of all it's a duplicate of http://stackoverflow.com/questions/5684160/can-i-have-multiple-not-selectors second of all it's a question to which the answer can be found veeeery easily on google or even here on stackoverflow . — Mihai T, Sep 30 '16 at 13:52
my question was not about multiple not selectors, that is the answer, which I didn't know — Legionar, Sep 30 '16 at 13:55
here on SO are thousands of duplicate questions with 100 and more votes... whats your problem, man? — Legionar, Sep 30 '16 at 13:56
:) well. you need to know how to search : " css :not multiple class " something like this. it's not that complicated. another SO question that has been marked as duplicate of the one i gave you earlier : http://stackoverflow.com/questions/24266518/multiple-classes-inside-not ....... i don't have a problem . i am just saying that posting a question that has been asked so many times and which is sooo easy to find the answer to , should be avoided and surely should not be awarded upvotes — Mihai T, Sep 30 '16 at 13:56
ok, but I can't upvote it :-) and who upvoted, I don't think so, they will read these comments — Legionar, Sep 30 '16 at 14:00

score 13 · Accepted Answer · answered Sep 30 '16 at 10:56

13

You can use as many :not() selectors as you like.

:not(.foo):not(.bar)

answered Sep 30 '16 at 10:56

Quentin

score 2 · Answer 2 · edited Sep 30 '16 at 11:05

2

With upcoming CSS4 selectors you can use a syntax like:

:not(.class1, .class2, .class3)

and so on. But browser support isn't good so far. To be able to use it today, you can use cssnext for example.

edited Sep 30 '16 at 11:05

Legionar

answered Sep 30 '16 at 11:00

Christoph

score 1 · Answer 3 · edited Sep 30 '16 at 19:12

1

.list th:not[class*="class"] { }

It will work with all classes, like class1, class2 etc.

edited Sep 30 '16 at 19:12

Laurel

answered Sep 30 '16 at 10:53

Shahzaib

the names of classes are just examples, so how about totally different class names? – Legionar Sep 30 '16 at 10:54
no, its not working, not with `class1` and `class2`, also you can't apply it to classes with totally different names like, f.e `my_class` and `your_house`. – Legionar Sep 30 '16 at 11:00
1

.list th:not[class^="class"] { } – Shahzaib Sep 30 '16 at 11:05
3

Would be: `list .th:not([class^="class"])` – Christoph Sep 30 '16 at 11:55

score 0 · Answer 4 · answered Sep 30 '16 at 11:05

0

Use comma to separate class name can get you want

.list th:not(.class1, .class2)

answered Sep 30 '16 at 11:05

velen

4 Answers4