What the code fragment has the greater CSS specificity?

Technology CommunityCategory: CSSWhat the code fragment has the greater CSS specificity?
VietMX Staff asked 3 years ago
Problem

Consider the three code fragments:

// A
h1
// B 
#content h1
// C 
<div id="content">
   <h1 style="color: #fff">Headline</h1>
</div>

What the code fragment has the greater specificy?

The CSS specificity:

  • A is 0,0,0,1 (one element),
  • B is 0,1,0,1 (one ID reference point and one element),
  • C is 1,0,0,0 (since it is an inline styling).

Since 0001 = 1 < 0101 = 101 < 1000,

the third rule has a greater level of specificity, and therefore will be applied. If the third rule didn’t exist, the second rule would have been applied.