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
44
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
プログラマのための作曲入門
cheebow
0
540
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
yutailang0119
0
220
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
680
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
350
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.8k
Swift Concurrency - 状態監視の罠
objectiveaudio
2
450
Serena MCPのすすめ
wadakatu
4
900
クラシルを支える技術と組織
rakutek
0
190
CSC509 Lecture 01
javiergs
PRO
1
430
CSC305 Lecture 01
javiergs
PRO
1
400
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.4k
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
A designer walks into a library…
pauljervisheath
209
24k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Building an army of robots
kneath
306
46k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
Code Reviewing Like a Champion
maltzj
525
40k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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!