the 4 levels of
css specificity
remember this stuff.
it's kind of !important;
general rules
example
http://codepen.io/anon/pen/zamqb
question to be answered
"Why is the text magenta?"
how to assign specificity
4 available slots
[] [] [] []
start at 0 and count up
[ 0 ] [ 0 ] [ 0 ] [ 0 ]
the different levels
[ 0 ] [ 0 ] [ 0 ] [ 0 ]
Level 4 Level 3 Level 2 Level 1
level 1
elements &
pseudo-elements
p
[ 0 ] [ 0 ] [ 0 ] [ 1 ]
a
[ 0 ] [ 0 ] [ 0 ] [ 1 ]
ul li
[ 0 ] [ 0 ] [ 0 ] [ 2 ]
tr li span a
[ 0 ] [ 0 ] [ 0 ] [ 4 ]
li:before , a:after
[ 0 ] [ 0 ] [ 0 ] [ 4 ]
level 2
classes, attributes & pseudo-classes
.odd
[ 0 ] [ 0 ] [ 1 ] [ 0 ]
.fancy
[ 0 ] [ 0 ] [ 1 ] [ 0 ]
li.even
[ 0 ] [ 0 ] [ 1 ] [ 1 ]
span a.special
[ 0 ] [ 0 ] [ 1 ] [ 2 ]
level 3
id's
#unique
[ 0 ] [ 1 ] [ 0 ] [ 0 ]
li #new
[ 0 ] [ 1 ] [ 0 ] [ 1 ]
level 4
inline styles
<h1 style=""color: #000"">
[ 1 ] [ 0 ] [ 0 ] [ 0 ]
<li style=""text-decoration: none"">
[ 1 ] [ 0 ] [ 0 ] [ 0 ]
level 0
*
*
[ 0 ] [ 0 ] [ 0 ] [ 0 ]
No specificity
level 5
!important;
p { color: #FFF !important; }
[ 1 ] [ 0 ] [ 0 ] [ 0 ] [ 0 ]
Extra level of specificity
let's practice
Made with Slides.com