CSS :not() selector on all descendants

Question

How can I make it happen that the :not()-selector works in the following example?

HTML

<div id="content">
  <div id="one">
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
</div>
  <div id="two">
    <div class="mystyle"><p>This is a <a href="">link</a>.</p></div> <!-- should NOT be green -->
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
</div>
</div>

CSS

#content a:not(.mystyle) {
  color: green;
}

JSFIDDLE

Link to jsfiddle

Important

I am trying to style an external widget on my blog. I don't have access to it's HTML so changing the HTML is not an option. I am looking for an CSS-only solution.

There are four links. All links should be green with one exception: the link in the class="mystyle". — Sr. Schneider, Mar 01 '17 at 18:12
Your fiddle is quite different from the code in your question — j08691, Mar 01 '17 at 18:13

Soviut · Accepted Answer · 2017-03-01T21:32:31.993

In your example, the :not() selector is applied to the a element. This would only select a tags that did not have a .mystyle class on it.

#content > * > *:not(.mystyle) a {
    color: green;
}

The above will select any descendants 2 levels down that don't have a .mystyle class, then colour all their decendant a tags green.

Below is a working example:

#content > div > div:not(.mystyle) a {
  color: green;
}

<div id="content">
  <div id="one">
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
</div>
  <div id="two">
    <div class="mystyle"><p>This is a <a href="">link</a>.</p></div> <!-- should NOT be green -->
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
</div>
</div>

Michael Benjamin · Answer 2 · 2017-03-01T18:20:00.050

1

There are four links. All links should be green with one exception: the link in the class="mystyle".

Then why are you using :not()? Just give the color to the existing class.

* { color: green; }

.mystyle * { color: red; }

<div id="content">
  <div id="one">
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
</div>
  <div id="two">
    <div class="mystyle"><p>This is a <a href="">link</a>.</p></div> <!-- should NOT be green -->
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
</div>
</div>

edited Mar 01 '17 at 18:20

answered Mar 01 '17 at 18:10

Michael Benjamin

346,931
104
581
701

1

Seems like the answer I was going to post; http://codepen.io/anon/pen/LWGygY?editors=1100 – Bhavik Mar 01 '17 at 18:28
I am trying to style a external widget (I dont't have access to it's HTML so changing the HTML is not an option!). – Sr. Schneider Mar 01 '17 at 18:30
My answer doesn't change the HTML. Are you saying that the `mystyle` class doesn't really exist? – Michael Benjamin Mar 01 '17 at 18:34

score 0 · Answer 3 · answered Mar 01 '17 at 18:28

Like that? :

div:not(.mystyle) > p > a { color: green; }

<div id="content">
  <div id="one">
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
</div>
  <div id="two">
    <div class="mystyle"><p>This is a <a href="">link</a>.</p></div> <!-- should NOT be green -->
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
</div>
</div>

score 0 · Answer 4 · answered Mar 01 '17 at 18:31

A way to do this you can check in the below snippet.

div:not(.calc) > p {
  color: green;
}

<div id="content">
<div><p>Hi</p></div>
<div ><div class="calc"><p>Hi</p></div></div>
<div><p>Hi</p></div>
</div>

CSS :not() selector on all descendants

4 Answers4