CSS
Specificity

with icons inspired
by Stanley Kubrick's
“The Shining”

The typewriter from the movie, with 'all work and no play make Jack a dull boy' written across the page several times, progressively more unhinged.
universal selector
universal selector
* 0–0–0
1 type
1 type
section 0–0–1
2 types
2 types
section > p 0–0–2
9 types
9 types
body … section p 0–0–9
1 class
1 class
.missing-key 0–1–0
1 universal selector, 1 class
1 universal selector
1 class
*.missing-key 0–1–0
1 universal selector, 1 attribute selector
1 universal selector
1 attribute selector
*[type:checkbox] 0–1–0
1 pseudo-class
1 pseudo-class
:only-of-type 0–1–0
1 type, 1 class
1 type
1 class
li.myclass 0–1–1
1 type, 1 attribute
1 type
1 attribute
li[attr] 0–1–1
2 types, 1 pseudo-class
2 types
1 pseudo-class
li:nth-of-type(3n)~li 0–1–2
2 types
1 attribute
form input[type=email] 0–1–2
1 type, 1 class, 1 pseudo-class
1 type
1 class
1 pseudo-class
li.class:focus 0–2–1
1 type, 1 class, 1 attribute
1 type
1 class
1 attribute
input[type]:not(.class) 0–2–1
10 classes / attribute pseudo-classes
10 classes /
attribute pseudo-classes
.cl:focus .chk[type]… 0–10–0
1 ID selector
1 ID selector
#colophon 1–0–0
2 types, 2 class / attribute, 1 ID selector
2 types
2 class / attribute
1 ID selector
#elem li.class a[href] 1–2–2
2 ID selectors, 1 type selector
2 ID selectors
1 type selector
#divitis #myDiv a 2–0–1
inline styles are generally bad
inline style
<p style="…"> 1–0–0–0
!important is axe murder
!important
!important 1–0–0–0–0