DEV Community

Cover image for The CSS Podcast: Episode Three - Specificity
Brittney Postma
Brittney Postma

Posted on • Updated on <time datetime="2020-10-26T16:45:11Z" class="date">Oct 26, 2020</time> • Originally published at console-logs.netlify.app

The CSS Podcast: Episode Three - Specificity

The CSS Podcast Banner

Hi, I'm Brittney and I'm on a journey to write a podcast about each episode for The CSS Podcast. I'm also an instructor over at ZTM Academy and the owner, designer, and developer at bDesigned. You can find more dev notes by me at Console Logs.

Episode Three: Specificity

Alt Text

Episode Links

Diagram by Estelle Weyl

Specificity Calculator

What happens when a subject is being targeted by multiple rules? The rule with the highest amount of points, or specificity, wins out. Specificity is how the browser decides which styles should be applied to an item. A weight or in this example points are given to each selector based on their ranking of least to most specific. Here's the game, we start at 0 and add up the number of points for each selector. If there is a tie, the last rule in the stylesheet wins. And no cheating by duplicating extra classes to your css 😜!

Points Selectors
0 Universal/Not */:not
1 Element/Pseudo-element h1/::before
10 Class/Pseudo-class ``./:focus
100 ID #
1000 Inline style

Game Time

  • *
  • p
  • main .header
  • #nav ul li
  • a:active
  • a:not(:active)
  • article a.outbound:not(:visited)
  • a.lol.lol.lol.lol

Check your scores in the specificity calculator. How did you do? Hopefully, this article helped you learn a little more about how to calculate specificity and apply it in your CSS! Cya next time 👋!

Discussion (0)