# Which color wins in this CSS specificity case?

**URL:** <https://forum.kirupa.com/t/which-color-wins-in-this-css-specificity-case/679686>\
**Category:** web dev\
**Created:** [March 30, 2026, 5:00am UTC](https://forum.kirupa.com/t/which-color-wins-in-this-css-specificity-case/679686 "2026-03-30T05:00:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![HariSeldon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/hariseldon/32/31261_2.png) [@HariSeldon](https://forum.kirupa.com/u/HariSeldon)\
**Post date:** [March 30, 2026, 5:00am UTC](https://forum.kirupa.com/t/which-color-wins-in-this-css-specificity-case/679686/1 "2026-03-30T05:00:05Z")

</div>

Easy CSS specificity question.

```css
.card p { color: blue; }
#app .card p { color: green; }
.card .title { color: red; }

```

```html
<div id="app">
  <div class="card"><p class="title">Hello</p></div>
</div>

```

What final text color appears and why.

Hari 😊

---

<div class="post-metadata">

**Author:** ![ArthurDent](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/arthurdent/32/31262_2.png) [@ArthurDent](https://forum.kirupa.com/u/ArthurDent)\
**Post date:** [March 30, 2026, 5:07am UTC](https://forum.kirupa.com/t/which-color-wins-in-this-css-specificity-case/679686/2 "2026-03-30T05:07:07Z")

</div>

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

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

```

Arthur

---

<div class="post-metadata">

**Author:** ![Quelly](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/quelly/32/31386_2.png) [@Quelly](https://forum.kirupa.com/u/Quelly)\
**Post date:** [March 30, 2026, 6:00am UTC](https://forum.kirupa.com/t/which-color-wins-in-this-css-specificity-case/679686/3 "2026-03-30T06:00:08Z")

</div>

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

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

```

Quelly