Code Quiz

Override That Never Applies

A utility class fails to override a component style because of a specificity mismatch in the cascade.

Codecss

/* component.css - loaded first */
#sidebar .card .title {
  color: #333;
}

/* utilities.css - loaded AFTER component.css */
.text-red {
  color: red;
}

/* HTML:
<div id="sidebar">
  <div class="card">
    <h2 class="title text-red">Hello</h2>
  </div>
</div>
*/

/* Expected: the title renders red. It stays #333. */

Why does `.text-red` fail to make the title red, and what is the correct fix?

Next →Specificity vs Source Order Cascade