3

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

arash yousefi
  • 376
  • 5
  • 16
  • 1
    It would likely be cleaner, and more clear if you were to write a CSS rule targeting that `div` and it's content overriding the global style. – fubar Mar 10 '20 at 05:46
  • if you mean the **!important**, i've tried that too, i want the font-family to be unset at all, but with the override it gets the font from * again. – arash yousefi Mar 10 '20 at 05:55

2 Answers2

2

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>
Cray
  • 2,774
  • 7
  • 22
  • 32
  • thanks, it was very smart. but i am dynamically setting the font for that class, and i need it to be unset. but i see that * thing is applying to them. your code works correctly for an assigned font, but with unset it was not working. – arash yousefi Mar 10 '20 at 06:16
  • If you are already setting the font where is the problem? Please edit your question to include all relevant information. If you are using `*` selector it also affects your `body` tag. Therefore if you unset the font on `div.a` it will inherit a font from `body`. – Cray Mar 10 '20 at 06:31
  • Added an alternative that uses `unset`, but the end result is basically the same. – Cray Mar 10 '20 at 06:45
  • the :not you used for body will affect only the div and it won't work for it's children. – arash yousefi Mar 10 '20 at 06:50
  • It seems your problem might not be with CSS, if you look at my second example you can either set `font-family` on `body` or `.a` and it does override `*:not()` selector. – Cray Mar 10 '20 at 06:54
  • thanks anyway, it solved some of it, really helpful. – arash yousefi Mar 10 '20 at 06:57
  • There might be some confusion as to what `unset` does. `unset` sets an inherited property (which `font-family` is) of an element to the same as its parent - which seems to be the opposite of what you are trying to do. – Swimmer F Mar 10 '20 at 07:08
  • you are right, that's the problem i want the css rule for font to be added to all but this div and it's children, and i used the id or class, it is a little complex with **not** selector and it can not be applied. @SwimmerF even the unset makes my fonts unavalible as you mentioned – arash yousefi Mar 10 '20 at 07:17
1

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

arash yousefi
  • 376
  • 5
  • 16