CODEWITHSUNDEEP
css
zeroliu
zeroliu

Reputation: 1040

font-weight: bold !important is overridden

I run into a situation where I need to override font-weight property. However, even though I use !important to increase its priority, it still gets overridden by other styles. As you can see in the following example, I am expecting hello world to be bolded, but it is using font-weight: normal instead. Any ideas? Thanks

body {
  font-weight: bold !important;
}

div {
  font-weight: normal;
}
<div>Hello World</div>

Upvotes: 3

Views: 6791

Answers (2)

Temani Afif
Temani Afif

Reputation: 273032

You can consider the universal selector if you want to make your font-weight to apply on the div and also other tags. (as i suspect you want to make all the page bold)

In your case you are appling the style to body and not the div element and style of child element always override the parent style even with the use of !important. So this rule will only work with element that inherit the font-weight from the body.

body *{
  font-weight: bold !important;
}

div {
  font-weight: normal;
}
<div>Hello World</div>

Upvotes: 3

Aurel B&#237;l&#253;
Aurel B&#237;l&#253;

Reputation: 7973

This has to do with binding priority of the styles. A way to resolve this is to make the rule more specific, e.g. by targeting body div instead:

body div {
  font-weight: bold !important;
}

div {
  font-weight: normal;
}
<div>Hello World</div>

However, please don't do this unless absolutely completely unavoidable. !important is a hack at best. If you are in control of the HTML, just introduce a class or use a more relevant selector.

Upvotes: 3

Related Questions