# CSS to change tab label dynamically?

**URL:** <https://community.glideapps.com/t/css-to-change-tab-label-dynamically/85082>\
**Category:** Ask for Help\
**Created:** [October 25, 2025, 2:40pm UTC](https://community.glideapps.com/t/css-to-change-tab-label-dynamically/85082 "2025-10-25T14:40:18Z")\
**Posts on this page:** 1\
**Showing post:** 8

<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:** [October 27, 2025, 2:04pm UTC](https://community.glideapps.com/t/css-to-change-tab-label-dynamically/85082/8 "2025-10-27T14:04:50Z")

</div>

@Hassan_Nadeem,  
Place your `<div class="flag" data-status="Change"></div>` inside a **Rich Text** component (or one sourced from a user profile table), and make sure it exists on every screen where your tab label needs to appear.  
Then, copy the rest of the code into the **Custom CSS** box.  
Please refer to: [🧠 CSS Hack: Dynamic CSS in Glide](https://community.glideapps.com/t/css-hack-dynamic-css-in-glide/85080)

* * *
Additionally, for your information — the \*\*data-status\*\* (attribute) approach allows for more complex conditional styling. However, if your condition only has two states (`Change` and `unChange`), you can simplify the setup by using a \*\*permanent class name\*\* and control visibility directly through the Rich Text component itself.

In that case, within the CSS code I shared earlier, simply replace every

`#page-root:has([data-status="Change"])` with` #page-root:has(.flag)`

---

_[View the full topic](https://community.glideapps.com/t/css-to-change-tab-label-dynamically/85082)._