<h2>CSS Specificity</h2> <ul> <li id="item1" class="item"> <div id="color1" class="color" style="background-color:red;">#1</div> </li> <li id="item2" class="item"> <div id="color2" class="color">#2</div> </li> <li id="item3" class="item"> <div id="color3" class="color">#3</div> </li> <li id="item4" class="item"> <div id="color4" class="color">#4</div> </li> <li id="item5" class="item"> <div id="color5" class="color">#5</div> </li> <li id="item6" class="item"> <div id="color6" class="color">#6</div> </li> <li id="item7"> <div id="color7" class="color">#7</div> </li> <li id="item8"> <div id="color8">#8</div> </li> </ul>
/* Specificity formula: style|id|class|tag Note: Every selector below selects a "div". */ /* For div with id = c1, style attribute is present so, Specificity : 1|0|0|0 = 1000 hence, it's color is RED. */ .color { /* Specificity : 0|0|1|0 = 0010 */ background-color : gray; } div { /* Specificity : 0|0|0|1 = 0001 */ background-color : black; } /* Below classes are used for list formatting and have nothing to do with specificity we are discussing. */ div { width: 100px; height: 30px; border : 1px solid silver; color : white; font-weight: bold; text-align: center; } li { list-style: none; }