Border Color in a Collection based on Tag

Community Resources
1

How to style card borders based on button tags (custom CSS example)

immagine_2025-12-02_101643351
immagine_2025-12-02_1016433511129×642 44.7 KB

Hi everyone!
I wanted to share a small CSS trick I’m using to customize the border of cards inside a Card Collection, based on the tag/value of one of the buttons.

In my setup, each card contains a button whose label represents a priority level (e.g., “High”, “Medium”, “Low”). My goal was to have the card border change color automatically depending on the priority.

To achieve this, I used the :has() selector to check whether the card contains a button with a specific aria-label:

.card-collection-with-radius div[data-testid="cc-card"]:has(button[aria-label="Alta"]) { 
    border: 4px solid #fe0032;
    box-shadow: 0 0 0px #faaf01;
    border-radius: 25px;
}

:pushpin: What this snippet does:

  • If the card contains a button with aria-label="Alta" (in my case the “High” tag), the custom style is applied.
  • Adds a 4px red border.
  • Adds a subtle box-shadow.
  • Rounds the corners of the card (25px).

You can easily extend this for other priority levels by changing the label in the selector:

/* Medium Priority */
.card-collection-with-radius div[data-testid="cc-card"]:has(button[aria-label="Media"]) { 
    border: 4px solid #ffaa00;
}

/* Low Priority */
.card-collection-with-radius div[data-testid="cc-card"]:has(button[aria-label="Bassa"]) { 
    border: 4px solid #00c853;
}
6 Likes
2

@ThinhDinh I would put that in community ressources!

1 Like
3

I have one question. What does the button do in your case? Does it move you to a list of tasks with the same priority level?

I feel like this can be more generalized if we use an invisible rich text component that has a custom class name instead of a visible button if you don’t really need that button, but it’s great. Thanks for sharing!

4

Really appreciate your contribution — it’s great to see more people engaging with Dynamic CSS in Glide and sharing creative ideas! I want to point out that the attribute selector you’re using may not be fully stable, as we’ve seen in other discussions — some built-in Glide attributes can be translated automatically, which could break the styling across different locales.
I have previously mentioned using Glide’s attributes for dynamic selectors in this thread: Dynamic CSS in Glide. At that time, the intention was to highlight a possible pathway for Glide itself to expose styling hooks, rather than relying on existing attributes that might be unstable. Because many of these dynamic attributes are prone to translation, I personally avoid building critical styling on them.

5

I found myself using often this custom CSS, and the main aim is to tell the user of the CRM more infromations about the topic.
In this istance It upgrades the priority level, giving also a written clue for the new employees that are not familiare with the colors.
I built this solution also to link the colors changing to a change in the buttons action, while this feature is not fully used in this example, i found It very usefull in other collections. The only limit is that glide enables only 2 visibile buttons in a card collection, the others are hidden behind the more actions dots, and while you can still somewhat work with that, they won’t appear as a pseudo tag in the card bottom part.

1 Like
6

Thanks, i found you thread really detailed. I agree with you that using glide’s classes Is not a best practice solution but i like how quick is to deploy it.
I am Always open to learn, so feel free to upload a Better solution as a reply.

7

For a more stable approach using Glide’s built-in attributes without relying on Rich Text, you can check my latest thread here:

It demonstrates how to use image URL fragments as lightweight, reliable selectors for dynamic styling.

2 Likes