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
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.9k
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
320
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
11
4.5k
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
160
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
190
AI時代のUIはどこへ行く?
yusukebe
18
9.2k
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
270
print("Hello, World")
eddie
2
530
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Six Lessons from altMBA
skipperchong
28
4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Rails Girls Zürich Keynote
gr2m
95
14k
Designing for Performance
lara
610
69k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Making Projects Easy
brettharned
117
6.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
930
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
The Invisible Side of Design
smashingmag
301
51k
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!