# Is it possible to change individual card view item background colour for each card using CSS

**URL:** <https://community.glideapps.com/t/is-it-possible-to-change-individual-card-view-item-background-colour-for-each-card-using-css/76316>\
**Category:** Ask for Help\
**Tags:** custom-css\
**Created:** [September 12, 2024, 11:27am UTC](https://community.glideapps.com/t/is-it-possible-to-change-individual-card-view-item-background-colour-for-each-card-using-css/76316 "2024-09-12T11:27:17Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dilip\_Adiga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilip_adiga/32/60330_2.png) [@Dilip\_Adiga](https://community.glideapps.com/u/Dilip_Adiga)\
**Post date:** [September 12, 2024, 11:27am UTC](https://community.glideapps.com/t/is-it-possible-to-change-individual-card-view-item-background-colour-for-each-card-using-css/76316/1 "2024-09-12T11:27:17Z")

</div>

Hi,

I have a collection which is card view.

Is it possible to add different background colour to 4 cards I have using custom css?

I tried adding it to card view

It only changes the background of the whole view

 ![Screenshot 2024-09-12 at 4.56.55 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/6/b65125ec1764722c297fd6a6a6fd2aeddcd5a5f9.png)

How do I make it apply to the cards instead?

Regards,  
Dilip

---

<div class="post-metadata">

**Author:** ![Dilip\_Adiga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilip_adiga/32/60330_2.png) [@Dilip\_Adiga](https://community.glideapps.com/u/Dilip_Adiga)\
**Post date:** [September 12, 2024, 11:43am UTC](https://community.glideapps.com/t/is-it-possible-to-change-individual-card-view-item-background-colour-for-each-card-using-css/76316/2 "2024-09-12T11:43:55Z")

</div>

Hi Guys,

I found the solution.

/\* Target the cards inside the collection _/  
.collection-item .card {  
padding: 10px; /_ Common styling for all cards \*/  
border-radius: 8px;  
}

/\* Specific background colors for each card _/  
.collection-item:nth-child(1) .card {  
background-color: #FF5733; /_ Color for the first card \*/  
}

.collection-item:nth-child(2) .card {  
background-color: #33FF57; /\* Color for the second card \*/  
}

.collection-item:nth-child(3) .card {  
background-color: #3357FF; /\* Color for the third card \*/  
}

.collection-item:nth-child(4) .card {  
background-color: #FF33A5; /\* Color for the fourth card \*/  
}

**I am applying this but the first colour is applied to all cards.**

its not putting other colours.

Can you guys help me with the issue?

Regards,  
Dilip

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [September 12, 2024, 11:59am UTC](https://community.glideapps.com/t/is-it-possible-to-change-individual-card-view-item-background-colour-for-each-card-using-css/76316/3 "2024-09-12T11:59:01Z")

</div>

```auto
.collection-item [data-testid="cc-card"]:nth-child(1) > div {
background-color: #FF5733;
}

```

---

<div class="post-metadata">

**Author:** ![Dilip\_Adiga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilip_adiga/32/60330_2.png) [@Dilip\_Adiga](https://community.glideapps.com/u/Dilip_Adiga)\
**Post date:** [September 12, 2024, 12:24pm UTC](https://community.glideapps.com/t/is-it-possible-to-change-individual-card-view-item-background-colour-for-each-card-using-css/76316/4 "2024-09-12T12:24:18Z")

</div>

HI @Himaladin ,

Thank you for the reply. I understood my mistake.

It works like a charm.

I have been exploring CSS since last couple of days and realise it has massive power to make the UI look damn beautiful.

Regards,  
Dilip

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [September 19, 2024, 12:25pm UTC](https://community.glideapps.com/t/is-it-possible-to-change-individual-card-view-item-background-colour-for-each-card-using-css/76316/5 "2024-09-19T12:25:01Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.