CODEWITHSUNDEEP
csscss-selectors
betseg
betseg

Reputation: 165

How can I combine two :not()s?

I'm trying to do something like this:

:not(h1) > a,
:not(figure) > a {
    background: #859900;
}

But it doesn't work, because figure>a catches :not(h1)>a and h1>a catches :not(figure)>a. How can I combine those?

Upvotes: 4

Views: 2317

Answers (2)

LarsW
LarsW

Reputation: 1588

Combine the two :not() selectors, just as a selector for .class-a AND .class-b is .class-a.class-b.

:not(h1):not(figure) > a {
  color: red;
}
<h1><a>Test</a></h1>
<p><a>Test</a></p>
<figure>
  <a>Test</a>
</figure>

Upvotes: 10

gevorg
gevorg

Reputation: 5055

Use this, to combine multiple :not() selectors:

:not(h1):not(figure) > a {
    background: #859900;
}
<h1>
   <a href="http://stackexchange.com">Stack Exchange</a>
</h1>
<figure>
   <a href="http://stackexchange.com">Stack Exchange</a>
</figure>
<h2>
   <a href="http://stackexchange.com">Stack Exchange</a>
</h2>

Upvotes: 4

Related Questions