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
33
Make your JavaScript projects more accessible to newcomers
silvenon
0
72
React Hooks
silvenon
0
69
PostCSS
silvenon
0
42
CSS Custom Properties
silvenon
0
39
Maintainable Integration Testing in React
silvenon
0
29
Writing Codemods with jscodeshift
silvenon
0
27
Other Decks in Programming
See All in Programming
WindowInsetsだってテストしたい
ryunen344
1
160
GoのGenericsによるslice操作との付き合い方
syumai
2
600
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
nekoya3
0
400
業務自動化をJavaとSeleniumとAWS Lambdaで実現した方法
greenflagproject
1
110
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
270
Gleamという選択肢
comamoca
6
720
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
510
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
600
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
290
Parallel::Pipesの紹介
skaji
2
910
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
610
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
210
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
Documentation Writing (for coders)
carmenintech
71
4.9k
Docker and Python
trallard
44
3.4k
Faster Mobile Websites
deanohume
307
31k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Thoughts on Productivity
jonyablonski
69
4.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
How to Ace a Technical Interview
jacobian
276
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Become a Pro
speakerdeck
PRO
28
5.4k
個人開発の失敗を避けるイケてる考え方 / 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!