the 4 levels of
css specificity


remember this stuff.
it's kind of !important;


general rules


example


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

CSS specificity

By rmion

Made with Slides.com

CSS specificity

  • 466

More from rmion