CSS Specificity

by Sarah Giles

HTML

<h3 style="margin-bottom: 0">Normal CSS Specificity</h3>
<div id="wrapper"  class="test-class">
<div class="test-class" style=" border: 2px dashed rgba(0,0,0,.1); padding: 0 .5em">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div class="test-class">
<div...

CSS

*{
  font-family: Helvetica, Calibri, sans-serif;
}

/* -----------Classes and Psudo Classes vs. Type ---------- */

/* css specifity 14 */
div div div div div div div div div div div div ul li {
  color: red;
}

/* css specifity 11 */
.class-test-list li {
  color: purple;
}

/* css specifity 11 */
li:first-child {
  color: green;
}

/* -----------Header id vs class ---------- */

/* css specifity 11 */
h3.test-header{
  color: black;
}

/* css specifity 101  */
#wrapper h3{
 color: green;
}

/* css specifity 121 */
.test-class .test-class10 .test-class9 .test-class8 .test-class7 .test-class6 .test-class5 .test-class4 .test-class3 .test-class2 .test-class1 h3.test-header{
  color: orange;
}

/* css specifity 239 ? */
div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class div.test-class...