# Which color wins in this CSS specificity case?

**URL:** <https://forum.kirupa.com/t/which-color-wins-in-this-css-specificity-case/679773>\
**Category:** web dev\
**Created:** [March 31, 2026, 8:00pm UTC](https://forum.kirupa.com/t/which-color-wins-in-this-css-specificity-case/679773 "2026-03-31T20:00:06Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sarah\_connor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sarah_connor/32/31258_2.png) [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Post date:** [March 31, 2026, 8:00pm UTC](https://forum.kirupa.com/t/which-color-wins-in-this-css-specificity-case/679773/1 "2026-03-31T20:00:06Z")

</div>

Consider this snippet.

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

Sarah

---

<div class="post-metadata">

**Author:** ![sora](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sora/32/31259_2.png) [@sora](https://forum.kirupa.com/u/sora)\
**Post date:** [March 31, 2026, 8:07pm UTC](https://forum.kirupa.com/t/which-color-wins-in-this-css-specificity-case/679773/2 "2026-03-31T20:07:05Z")

</div>

Green wins because `#app .card p` has higher specificity than `.card .title`, even though both match the `<p>`.

Sora

---

<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 31, 2026, 8:21pm UTC](https://forum.kirupa.com/t/which-color-wins-in-this-css-specificity-case/679773/3 "2026-03-31T20:21:06Z")

</div>

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