CSS selector but not when another class is present

Question

How does one select the class jdgm-paginate__page unless jdgm-paginate__next-page is also applied to the element?

<a class="jdgm-paginate__page " data-page="2">2</a> <a class="jdgm-paginate__page jdgm-paginate__next-page" data-page="2"></a>

Possible duplicate of [Can I write a CSS selector selecting elements NOT having a certain class?](https://stackoverflow.com/questions/9110300/can-i-write-a-css-selector-selecting-elements-not-having-a-certain-class) — Sebastian Brosch, Aug 17 '18 at 14:48

Ori Drori · Accepted Answer · 2018-08-17T15:02:41.467

3

Use the :not() pseudo-class:

.jdgm-paginate__page:not(.jdgm-paginate__next-page):not(.jdgm-paginate__last-page) {
  color: red;
}

a {
  display: block;
}

<a class="jdgm-paginate__page " data-page="2">select</a>
<a class="jdgm-paginate__page jdgm-paginate__next-page" data-page="2">don't select next</a>
<a class="jdgm-paginate__page jdgm-paginate__last-page" data-page="2">don't select last</a>

edited Aug 17 '18 at 15:02

answered Aug 17 '18 at 14:46

Ori Drori

183,571
29
224
209

How about if I also had the class .jdgm-paginate__last-page? – Joe Ainsworth Aug 17 '18 at 14:55
How should it behave with .jdgm-paginate__last-page? – Ori Drori Aug 17 '18 at 14:57
Not select either .jdgm-paginate__next-page or .jdgm-paginate__last-page. Only .jdgm-paginate – Joe Ainsworth Aug 17 '18 at 14:58
You can add multiple `:not()` statements. See updated example. – Ori Drori Aug 17 '18 at 15:03

score 1 · Answer 2 · answered Aug 17 '18 at 14:48

You can use the CSS :not pseudo class. For example:

.jdgm-paginate__page {
  background: red;
}

This would make all elements with that class red regardless of additional classes.

.jdgm-paginate__page:not(.jdgm-paginate__next-page) {
  background: red;
}

All elements with class .jdgm-paginate__page but no with .jdgm-paginate__next-page will be red

score 0 · Answer 3 · answered Aug 17 '18 at 15:08

Maybe not the best solution, but you can also use attribute selector to select your specific element in case you don't know what are the other classes:

[class="jdgm-paginate__page"] {
  color: red;
}

a {
  display: block;
}

<a class="jdgm-paginate__page" data-page="2">select</a>
<a class="jdgm-paginate__page jdgm-paginate__next-page" data-page="2">don't select next</a>
<a class="jdgm-paginate__page jdgm-paginate__last-page" data-page="2">don't select last</a>

CSS selector but not when another class is present

3 Answers3