Which color wins in this CSS specificity case?

programming web dev
1

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.

BayMax

2

Green wins because #app .card p has an ID in the selector, so its specificity beats .card .title even though both match the <p>.

Ellen