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
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 👋!
Top comments (0)