Raise specificity of * selector

user_16552240 0
Viewed 57

I am creating a chrome extension that makes webpages a certain font. I have a content script that appends this as a style element in the head of the document but on some sites the font still does remains the same. How would I be able to raise the specificity of this so that I it would be able to override any other css rule?

*
{
  font-family: Arial !important; 
}

An example of a site that it does not work on: https://dailyiowan.com/2021/12/07/4-best-linux-based-router-os-that-you-can-install-right-now/

css
2 Answers

The problem is, that some sites set their font with !important so that you cannot override it.

Obviously you cannot increase the specificity by adding a bigger "path" (as in more classes, tags or ids) to the selector, because you do not know them.

So the only way I see to force your font is by applying the style as inline-style with javascript.

style="font-family: Arial !important"

This should always override other styles.

user_104956830

The problem is this:

The universal selector (*) and the pseudo-class :where() and its parameters aren't counted when calculating the weight, but they do match elements. The value for both the universal selector and the pseudo-class is 0-0-0; these selectors do not impact the specificity weight value.

So, you would need to increase specificity by targeting something more specific in your css rules.

  • ID : it adds 1-0-0 to the weight value.
  • CLASS column: it adds 0-1-0 to the weight value.
  • TYPE column: it adds 0-0-1 to the weight value.

There are some tricks you can add to increase the specificity value, for instance, duplicating the selector value like in the next example:

#myId#myId#myId span { /* 3-0-1 */}
.myClass.myClass.myClass span { /* 0-3-1 */ }

So, there you have it, you need to be more specific applying your css rules in order to make them override other competing rules. For more details I recommend you to give it a read to the Specificity section in MDN web docs.

user_151046390
Related