DEV Community

loading...
Cover image for The CSS Podcast: Episode Three - Specificity

The CSS Podcast: Episode Three - Specificity

Brittney Postma
🌊 brittneypostma.com☕ buymeacoffee.com/brittneypostma😻 codingcat.dev🖊 theconsolelogs.com👩‍🏫 ZTM Academy🎈 redbubble.com/people/bDesigned/shop✨🌈
Originally published at console-logs.netlify.app Updated on ・2 min read

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)