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
30
CSS Specificity
Matija Marohnić
October 09, 2020
Tweet
Share
More Decks by Matija Marohnić
See All by Matija Marohnić
Introduction to Remix
silvenon
0
140
Cypress vs. Playwright
silvenon
0
160
Studying Strapi: an open source head headless CMS
silvenon
0
38
Make your JavaScript projects more accessible to newcomers
silvenon
0
73
React Hooks
silvenon
0
72
PostCSS
silvenon
0
43
CSS Custom Properties
silvenon
0
40
Maintainable Integration Testing in React
silvenon
0
31
Writing Codemods with jscodeshift
silvenon
0
29
Other Decks in Programming
See All in Programming
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
350
Cache Me If You Can
ryunen344
2
3.8k
RDoc meets YARD
okuramasafumi
4
170
旅行プランAIエージェント開発の裏側
ippo012
2
930
Ruby Parser progress report 2025
yui_knk
1
460
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
230
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
2k
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
150
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1032
460k
Speed Design
sergeychernyshev
32
1.1k
The Invisible Side of Design
smashingmag
301
51k
Docker and Python
trallard
46
3.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Statistics for Hackers
jakevdp
799
220k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Thoughts on Productivity
jonyablonski
70
4.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
A Modern Web Designer's Workflow
chriscoyier
696
190k
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!