How can i use :not to give some specific CSS to parent element not to the child and sub-child?

Question

Hello this is the code

<div class="content-wrapper">
<span>Lorem</span>
<span>
  <strong style="font-size: 18px">
    sometext
    <span style="font-size: 12px">
      <em>ipsum</em>
    </span>
  </strong>
</span>
<span style="font-size: 14px">dolar sit amet</span>

<span class="input__math">
  <span class="katex">
    <span class="katex-mathml">
        <span style="font-size: 14px">
          <strong>x</strong>
          <sup style="font-size: 10px">2</sup>
        </span>
        +
        <span style="font-size: 14px">
          <strong>y</strong>
          <sup style="font-size: 10px">2</sup>
        </span>
        =
        <span>
          <span style="font-size: 16px">
            <strong>
              1
            </strong>
          </span>
        </span>
    </span>
  </span>
</span>

</div>

and i am trying to add some CSS like font-size: 20px;important; inside all the content of content-wrapper class except math-content like whatever is coming inside the input__math class sholud not change. i tried like this

.content-wrapper *:not(.input__math *) {
  font-size: 20px !important;
}

But it's not working, Please help if you have any solution

here i have created a fiddle with some demo content with inline-css, please check

https://jsfiddle.net/u5xb49Lr/4/

Answer 1

If I understand you correctly, you do not want the font-size of.input__math or the font-size of all.input__math's child elements to change.

Using:not(.input__math) won't work here, since this will not target child elements of.input__math (because these, although they are children of 'input__math', don't have the class 'input__math' themselves).

Here's a different solution. CSS you apply to child elements will override CSS applied to parent elements. Therefore, you could do this:

.content-wrapper {
  font-size: 20px;
}

And then this:

.input__math {
  font-size: <other font size>;
}

Answer 2

Try this CSS style:

.content-wrapper:not(.input__math) {
  font-size: 20px !important;
}

That should do the job. There's no need for * sign in there.