How do I prevent my generic * { … } style from overriding parent tag

Question

How do I prevent my generic * { ... } style from overriding parent tag? In the below example, I would like the sssssssss to be of the style text-huge

.text-huge {
  font-size: 28px !important;
  color: green !important;
}

* {
  font-size: 12px;
  font-family: Verdana;
  color:red;
}

<form>
  <div>
    <p><span class="text-huge">line 1: aaaaaa<strong>sssssssss</strong>aaaaaaaa</span></p>
    <p>line 2</p>
  </div>
</form>

I expect the sssssssss to be same font color and size as the rest of line 1

I would recomment to avoid using the `*` selector at all. In your case just set the default values (everything inside your `*` selector) to the `body` tag and overwrite it with stronger selectors (e.g. the `.text-huge` class you already have) wherever you need it. I also would recommend to stay away as far as possible from `!important`. Its the living devil in css. — Fabian S., May 16 '19 at 07:47
@FabianSchöner, I would not say that `!important` is a living devil because it's very useful when modifying style through javascript. But also it's not ethical to use `!important` in primary styling of elements. — Francis G, May 16 '19 at 07:54
I would recommend reading about CSS specificity here: https://css-tricks.com/specifics-on-css-specificity/ — Fitzi, May 16 '19 at 07:57
@Francisaskquestion i agree, overwriting inline styles from js which cant be changed by proper js configuration is one of the very few cases where i believe using `!important` is actually legit. I also stand by my statement as 90% of the `!important` usage on this planet is caused by lazyness or just not understanding how css works. — Fabian S., May 16 '19 at 11:59

score 1 · Accepted Answer · answered May 16 '19 at 07:57

1

Use the generic selector before, so everything else can be overridden without using !important.

* {
  font-size: 12px;
  font-family: Verdana;
  color: red;
}

.text-huge,
.text-huge * {
  font-size: 28px;
  color: green;
}

<form>
  <div>
    <p><span class="text-huge">line 1: aaaaaa<strong>sssssssss</strong>aaaaaaaa</span></p>
    <p>line 2</p>
  </div>
</form>

answered May 16 '19 at 07:57

Sebastian Speitel

7,166
2
19
38

Note that the order has nothing to do here. You can keep `*` at the end, the main issue here is specificty and inheritance that you fixed by adding an extra rule. – Temani Afif May 16 '19 at 10:11
You need this order if you don't want to use !important – Sebastian Speitel May 16 '19 at 10:34
no you don't : https://jsfiddle.net/58vLhw3s/ – Temani Afif May 16 '19 at 10:35

score 0 · Answer 2 · answered May 16 '19 at 07:55

Avoid use *, instead use inherit ! :) Gonna have a better performance.

.text-huge {
  font-size: 28px !important;
  color: green !important;
}

.text-huge strong {
  font-size: inherit;
  font-family: Verdana;
  color:inherit;
}

<form>
  <div>
    <p><span class="text-huge">line 1: aaaaaa<strong>sssssssss</strong>aaaaaaaa</span></p>
    <p>line 2</p>
  </div>
</form>

score 0 · Answer 3 · answered May 16 '19 at 07:58

Better to use children selector in your style.

.text-huge,  .text-huge > * {
  font-size: 28px !important;
  color: green !important;
}

   

* {
  font-size: 12px;
  font-family: Verdana;
  color:red;
}

<form>
  <div>
    <p><span class="text-huge">line 1: aaaaaa<strong>sssssssss</strong>aaaaaaaa</span></p>
    <p>line 2</p>
  </div>
</form>

Or you could create separate styling for the children of the .text-huge element.

.text-huge {
  font-size: 28px !important;
  color: green !important;
}
.text-huge > * {
  font-size: 28px !important;
  color: green !important;
}

* {
  font-size: 12px;
  font-family: Verdana;
  color:red;
}

<form>
  <div>
    <p><span class="text-huge">line 1: aaaaaa<strong>sssssssss</strong>aaaaaaaa</span></p>
    <p>line 2</p>
  </div>
</form>

How do I prevent my generic * { … } style from overriding parent tag

3 Answers3