Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS Specificity
Search
Matija Marohnić
October 09, 2020
Programming
0
28
CSS Specificity
Matija Marohnić
October 09, 2020
Tweet
Share
More Decks by Matija Marohnić
See All by Matija Marohnić
Introduction to Remix
silvenon
0
130
Cypress vs. Playwright
silvenon
0
150
Studying Strapi: an open source head headless CMS
silvenon
0
35
Make your JavaScript projects more accessible to newcomers
silvenon
0
72
React Hooks
silvenon
0
71
PostCSS
silvenon
0
42
CSS Custom Properties
silvenon
0
39
Maintainable Integration Testing in React
silvenon
0
30
Writing Codemods with jscodeshift
silvenon
0
27
Other Decks in Programming
See All in Programming
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
120
AIともっと楽するE2Eテスト
myohei
0
330
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
480
Team operations that are not burdened by SRE
kazatohiei
1
310
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
230
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
760
CursorはMCPを使った方が良いぞ
taigakono
1
250
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
510
XP, Testing and ninja testing
m_seki
3
240
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
337
57k
GitHub's CSS Performance
jonrohan
1031
460k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Building Adaptive Systems
keathley
43
2.7k
Agile that works and the tools we love
rasmusluckow
329
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Embracing the Ebb and Flow
colly
86
4.7k
Raft: Consensus for Rubyists
vanstee
140
7k
Building Applications with DynamoDB
mza
95
6.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Transcript
Matija Marohnić CSS Specificity
A little bit about me • frontend developer and blogger
• obsessed with generating static sites • DX evangelist • open source • automate all the things • follow me on Twitter: @silvenon
MDN Web docs “Specificity is the means by which browsers
decide which property values are the most relevant to an element and, therefore, will be applied.”
X Y Z type selectors, pseudo-elements class selectors, attribute selectors,
pseudo-classes ID selectors
0 0 1 type selectors, pseudo-elements class selectors, attribute selectors,
pseudo-classes ID selectors
0 1 2 type selectors, pseudo-elements class selectors, attribute selectors,
pseudo-classes ID selectors
1 2 2 type selectors, pseudo-elements class selectors, attribute selectors,
pseudo-classes ID selectors
0 54 0 type selectors, pseudo-elements class selectors, attribute selectors,
pseudo-classes ID selectors A trick to bump specificity
0 1 0 type selectors, pseudo-elements class selectors, attribute selectors,
pseudo-classes ID selectors
• these don’t affect specificity: • universal selector (*) •
combinators (+, >, ~, etc.) • negation pseudo-class (:not())
0 0 0 type selectors, pseudo-elements class selectors, attribute selectors,
pseudo-classes ID selectors
0 1 1 type selectors, pseudo-elements class selectors, attribute selectors,
pseudo-classes ID selectors
1 0 0 0 type selectors, pseudo-elements class selectors, attribute
selectors, pseudo-classes ID selectors inline style
1 0 0 0 1 type selectors, pseudo-elements class selectors,
attribute selectors, pseudo-classes ID selectors inline style !important
When to use !important • as little as possible •
basically only to override third-party styles
An alternative to !important Lorem ipsum dolor, sit amet consectetur
adipisicing elit.
The best way to increase specificity is…
• the lower the specificity, the easier it is to
manage • plus, this way we keep repetition out of HTML …source order.
The color of the paragraph is: 1. red 2. green
3. blue 4. fuchsia Quiz!
Happy styling!