CSS Specificity Example

by Uday Hiwarale

HTML

<ul id="users" class="list">
  <li class="child blue">Hello World!</li>
</ul>

CSS

/* specificty: 0,0,1,2 */
ul.list li {
  font-family: sans-serif;
  font-size: 14px;
  list-style-type: none; /* removes bullet character */
  font-weight: normal;
  color: black;
}

/* specificty: 0,0,3,1 */
.list li.child.blue {
  color: blue;
  font-weight: bold;
}

/* specificty: 0,1,2,2 */
ul#users.list li.child {
  color: red;
}