# 🔗 CSS Hack: Dynamic CSS in Glide 2 via URL Fragment

**URL:** <https://community.glideapps.com/t/css-hack-dynamic-css-in-glide-2-via-url-fragment/85613>\
**Category:** Community Resources\
**Tags:** custom-css, tutorial, custom-code\
**Created:** [December 3, 2025, 7:32am UTC](https://community.glideapps.com/t/css-hack-dynamic-css-in-glide-2-via-url-fragment/85613 "2025-12-03T07:32:38Z")\
**Posts on this page:** 3\
**Page:** 1

<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:** [December 3, 2025, 7:32am UTC](https://community.glideapps.com/t/css-hack-dynamic-css-in-glide-2-via-url-fragment/85613/1 "2025-12-03T07:32:38Z")

</div>

Use image URL fragments as lightweight, reliable selectors.

I previously shared **[🧠 CSS Hack: Dynamic CSS in Glide](https://community.glideapps.com/t/css-hack-dynamic-css-in-glide/85080#:~:text=CSS%20Hack%3A%20Dynamic%20CSS%20in%20Glide)** — a method relying on Rich Text injection — and also using attributes already available in Glide: [https://community.glideapps.com/t/css-hack-dynamic-css-in-glide/85080/4](https://community.glideapps.com/t/css-hack-dynamic-css-in-glide/85080/4).

However, many of Glide’s built-in attributes are not stable as selectors because they may be translated. A more reliable method is to append a _fragment_ at the end of the image URL.

**Example**  
**Note** : The following example is for _ **Collection components** _.

Add a fragment to your image URL:

```auto
https://your-image.com/photo.png#tag

```

Target any component that uses the image URL ending with that fragment (`#tag`):

```auto
.custom-class [data-testid="cc-card"]:has(img[src$="#tag"]) {
    border: 3px solid red;
}

```

Using image URLs with fragment identifiers like `#active`, `#inactive`, or `#blocked` provides a much more stable selector than relying on most built-in Glide attributes, which may be automatically translated or altered by the app or browser.

* * *

 ![Screenshot 2025-12-03 124015](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/b/6b2feee4bd57dc297eaf0f305e2a4fe45a1edb31.jpeg)

**Example code according to Screenshot**

```auto
/* Blocked user */
.custom-class [data-testid="cc-card"]:has(img[src$="#blocked"]) {
    border: 3px solid red;
}

/* Inactive user */
.custom-class [data-testid="cc-card"]:has(img[src$="#inactive"]) {
    border: 3px solid #00b703;
}

```

```auto
/* Style meta text inside the card */
.custom-class [data-testid="cc-card"] p:nth-of-type(1) {
    padding: 3px 10px;
    color: white;
    width: fit-content;
    border-radius: 20px;
    margin-bottom: 10px;
}

/* Blocked user */
.custom-class [data-testid="cc-card"]:has(img[src$="#blocked"]) p:nth-of-type(1) { background: red;}

/* Inactive user */
.custom-class [data-testid="cc-card"]:has(img[src$="#inactive"]) p:nth-of-type(1) {background: #00b703;}

/* Active user */
.custom-class [data-testid="cc-card"] p:nth-of-type(1) {background: #555;}

```

You can also hide the image entirely if you don’t want it to display:

```auto
.custom-class [data-testid="card-image"] { 
    display: none;
}

```

 ![Screenshot 2025-12-03 135504](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/2/628b14139a5235dd0f53cb52d9acfc7fd576e8f0.png)

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [December 3, 2025, 9:14pm UTC](https://community.glideapps.com/t/css-hack-dynamic-css-in-glide-2-via-url-fragment/85613/2 "2025-12-03T21:14:08Z")

</div>

wow

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [December 4, 2025, 12:43pm UTC](https://community.glideapps.com/t/css-hack-dynamic-css-in-glide-2-via-url-fragment/85613/3 "2025-12-04T12:43:09Z")

</div>

Cool hack! Bookmarking this one!