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

user_10323532 0
Viewed 639

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

angular css
2 Answers

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>

user_112714320
user_103235320
Related