csscss-selectorscss-reset

Overriding CSS Reset with the Univeral Selector

I have a reset (Eric Meyer's Reset) which sets the font, then I load my stylesheet on top of this, in which I want to set the font globally using the universal selector

But although in my SASS the universal selector is loaded after the reset, the reset is taking precedence. (Please see attached screenshot from devtools)

I know this is to do with specificity, but I thought the universal selector would act as a wildcard. Why is this?

enter image description here

Solution

  • The universal selector * has no specificity value. Essentially anything and everything takes precedence over it.

    Via MDN:

    The following list of selector types is by increasing specificity:

    Universal selectors (e.g., *)

    Type selectors (e.g., h1)

    Class selectors (e.g., .example)

    Attributes selectors (e.g., [type="radio"])

    Pseudo-classes (e.g., :hover)

    ID selectors (e.g., #example)

    Inline style (e.g., style="font-weight:bold")

    and of course !important overrides all the above, but also does not have a specificity value.

    A good source for additional information can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity