Consider this snippet.
.card p { color: blue; }
#app .card p { color: green; }
.card .title { color: red; }
<div id="app">
<div class="card"><p class="title">Hello</p></div>
</div>
What final text color appears and why.
Sarah
Green wins because #app .card p has higher specificity than .card .title, even though both match the <p>.
Sora
Green in that exact example, but the useful rule is to compare the full specificity tuple, not just “ID beats class,” because source order only matters if the tuples tie.
Hari
