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

[Dilip_Adiga]

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

How do I make it apply to the cards instead?

Regards,
Dilip

[Dilip_Adiga]

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

[Himaladin]

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

[Dilip_Adiga]

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