DEV Community

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

Posted on • Edited on • Originally published at console-logs.netlify.app

2

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 👋!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more