CSS :not selector not working for nested elements-CodePudding

:not selector not working for nested elements div.class > div > a. In this below snippet

and elements text shown in red color.

.x-webkit *:not(p):not(em) {
  color: red;
}

<div >
  <div>red</div>
  <ul><li>red</li></ul>
  <div>
    <p>
      Not red<br>
      <strong>red</strong><br>
      <em>Not red</em>
    </p>
  </div>
  <div>red</div>
  <table><tr><td>red</td></tr></table>
</div>

CodePudding user response：

I think you will have to do it the other way around. Simply:

.x-webkit * {
  color: red;
}

.x-webkit p,
.x-webkit em {
  color: black;
}

<div >
  <div>red</div>
  <ul><li>red</li></ul>
  <div>
    <p>
      Not red<br>
      <strong>red</strong><br>
      <em>Not red</em>
    </p>
  </div>
  <div>red</div>
  <table><tr><td>red</td></tr></table>
</div>

CodePudding user response：

I don't know what you mean by *not(p):not(em),

If you want to select em inside p then you should be using *not(p em).

If p and em then like this *:not(p, em) in my example.

you can combine both to select an em inside p and p iteself by this *:not(p, p em)

.x-webkit * {
  color: #000;
}

.x-webkit *:not(p, em) {
  color: red;
}

<div >
  <div>red</div>
  <ul><li>red</li></ul>
  <div>
    <p>
      Not red<br>
      <strong>red</strong><br>
      <em>Not red</em>
    </p>
  </div>
  <div>red</div>
  <table><tr><td>red</td></tr></table>
</div>