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
Slide 3
Slide 3 text
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.”
Slide 4
Slide 4 text
X Y Z
type selectors,
pseudo-elements
class selectors,
attribute selectors,
pseudo-classes
ID selectors
Slide 5
Slide 5 text
0 0 1
type selectors,
pseudo-elements
class selectors,
attribute selectors,
pseudo-classes
ID selectors
Slide 6
Slide 6 text
0 1 2
type selectors,
pseudo-elements
class selectors,
attribute selectors,
pseudo-classes
ID selectors
Slide 7
Slide 7 text
1 2 2
type selectors,
pseudo-elements
class selectors,
attribute selectors,
pseudo-classes
ID selectors
Slide 8
Slide 8 text
0 54 0
type selectors,
pseudo-elements
class selectors,
attribute selectors,
pseudo-classes
ID selectors
A trick to bump specificity
Slide 9
Slide 9 text
0 1 0
type selectors,
pseudo-elements
class selectors,
attribute selectors,
pseudo-classes
ID selectors