betseg betseg - 5 months ago 9
CSS Question

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?

Answer

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>