Which color wins in this CSS specificity case?

programming web dev
1

Easy CSS specificity question.

.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.

Hari :blush:

2

Green, because #app .card p has higher specificity than .card .title, so the <p class="title"> ends up green.

.card p { color: blue; }      /* 0,1,1 */
#app .card p { color: green; }/* 1,1,1 */
.card .title { color: red; }  /* 0,2,0 */

Arthur

3

Green wins because #app .card p beats .card .title on the ID column, even though .card .title has more classes.

#app .card p { color: green; } /* 1,1,1 */
.card .title { color: red; }   /* 0,2,0 */

Quelly