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
71
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
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.4k
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
570
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
230
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
Select API from Kotlin Coroutine
jmatsu
1
190
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
110
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
690
CursorはMCPを使った方が良いぞ
taigakono
1
180
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
440
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
430
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Automating Front-end Workflow
addyosmani
1370
200k
Visualization
eitanlees
146
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Adopting Sorbet at Scale
ufuk
77
9.4k
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!