Overriding CSS Reset with Generic Selector
I have a reset (Eric Meyer Reset) that sets the font and then load my stylesheet on top of that, in which I want to set the font globally using the universal selector
But although in my SASS the universal selector is loaded after reset, reset takes precedence. (See attached screenshot from devtools)
I know this is specific, but I thought the universal selector would act like a template. Why is this?
source to share
The universal selector * has no specificity value. Essentially, anything and everything takes precedence over it.
Via MDN:
The following list of selector types is an increase in specificity:
Universal selectors (like *)
Type selectors (e.g. h1)
Class selectors (like example)
Selector attributes (eg [type = "radio"])
Pseudo-classes (e.g.: hover)
Selector ID (e.g. # example)
Inline style (for example, style = "font-weight: bold")
and of course importantly redefines all of the above, but it also doesn't matter for specificity.
A good source of more information can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
source to share