Apply CSS rule to all elements except one with it's children

Question

I have this CSS rule:

* {
  font-family: Tahoma;
}  

I want to apply the rule to all elements except this div, which is unique by class, and it's children:

<div class="angular-text-editor">
    <p></p>
    <p></p>
    <p></p>
</div>

font-family for this div and it's children should be picked by the user, but now because of the * rule applied, the new selected font can not be applied to them, even with !important.

I want some css rule which ensures that the * rule will apply to all elements except this div and it's children.

I even tried using the :not selector, but it was not helpful with the children.

thanks

Answer 1

Select the unique div with it's descendants and assign them a different font-family

* {
  font-family: sans-serif;
}

.a, .a * {
  font-family: monospace;
}

<div class="a">
   first text
   <p>more text</p>
   <div>
      further nested text
      <p>more text</p>
   </div>
</div>
<div>
   second text
   <p>more text</p>
</div>

Or assign font-family to body tag and use unset on unique element, inherit on it's descendants.

.a {
  font-family: unset;
}

.a * {
  font-family: inherit !important;
}

body *:not(.a) {
  font-family: sans-serif;
}

body {
  font-family: monospace;
}

<div class="a">
   first text
   <p>more text</p>
   <div>
      further nested text
      <p>more text</p>
   </div>
</div>
<div>
   second text
   <p>more text</p>
</div>

Answer 2

i changed the css rule to this :

body {
 font-family: Tahoma !important;
}

so all elements will inherit it if they don't have their own... special thanks to this man :

Applying a single font to an entire website with CSS