# Change Table Row Color Conditionally CSS?

**URL:** <https://community.glideapps.com/t/change-table-row-color-conditionally-css/74235>\
**Category:** Ask for Help\
**Created:** [June 19, 2024, 1:49pm UTC](https://community.glideapps.com/t/change-table-row-color-conditionally-css/74235 "2024-06-19T13:49:47Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![msamps](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/msamps/32/71072_2.png) [@msamps](https://community.glideapps.com/u/msamps)\
**Post date:** [June 19, 2024, 1:49pm UTC](https://community.glideapps.com/t/change-table-row-color-conditionally-css/74235/1 "2024-06-19T13:49:47Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/1/d1c0653a33f1f978139ac627c2d4efd3586b7811.png)

Is there a way i can change the color of a row in a glide table when both payments are checked to mark as paid? I would essentially like to highlight rows where the invoices are complete and am not sure if I can do this with css in glide. Thank you

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [June 19, 2024, 2:03pm UTC](https://community.glideapps.com/t/change-table-row-color-conditionally-css/74235/2 "2024-06-19T14:03:55Z")

</div>

I’m not sure about the css but just an idea you could try using the Tag Type 🏷 for your Job Status. That might add a little pop.

---

<div class="post-metadata">

**Author:** ![msamps](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/msamps/32/71072_2.png) [@msamps](https://community.glideapps.com/u/msamps)\
**Post date:** [June 19, 2024, 2:17pm UTC](https://community.glideapps.com/t/change-table-row-color-conditionally-css/74235/3 "2024-06-19T14:17:33Z")

</div>

Thank you for the suggestion

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [June 19, 2024, 11:43pm UTC](https://community.glideapps.com/t/change-table-row-color-conditionally-css/74235/4 "2024-06-19T23:43:33Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/a/1a2576d1ab797e77e7c6621610f64d8db8ba7554.png)

I have a prototype here, but it requires a few things so I’m not sure if it works. Requirements are:

- Have an additional If-Then-Else column to check if both payments have been completed.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/8/e8b01c05218b174c1f12a2fe5624b78cd5435d7e.png)

- Display them in a table like this, with Bool 1 and Bool 2 set to editable.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/5/e51d2a4154d7935b294058756d2fcdcb55bfafe6.png)

- The CSS:

```auto
tr[class*="new-table-lib___StyledTr"]:has(div[class*="true-boolean"]) {
background-color: gold;
}

label[class*="pages-switch___StyledLabel"] {
pointer-events: none;
cursor: not-allowed;
}

```

Reasoning: Only allow one true-boolean class (the Finished one) to appear, change the bools to editable and then not allowing them to be edited.

---

<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:** [June 19, 2024, 11:58pm UTC](https://community.glideapps.com/t/change-table-row-color-conditionally-css/74235/5 "2024-06-19T23:58:29Z")

</div>

> [@ThinhDinh](#):
>
> Only allow one true-boolean class (the Finished one) to appear

You may try double pseudo `:has`. However, I am starting to limit complex CSS for future maintenance reasons.

---

<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:** [June 26, 2024, 11:59pm UTC](https://community.glideapps.com/t/change-table-row-color-conditionally-css/74235/6 "2024-06-26T23:59:24Z")

</div>

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