# Monitor Font Color Change

**URL:** <https://forums.distill.io/t/monitor-font-color-change/1273>\
**Category:** Help and Support\
**Created:** [September 26, 2022, 5:20am UTC](https://forums.distill.io/t/monitor-font-color-change/1273 "2022-09-26T05:20:41Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![gostros73](https://forums.distill.io/letter_avatar_proxy/v4/letter/g/d9b06d/32.png) [@gostros73](https://forums.distill.io/u/gostros73)\
**Post date:** [September 26, 2022, 5:20am UTC](https://forums.distill.io/t/monitor-font-color-change/1273/1 "2022-09-26T05:20:41Z")

</div>

Is it possible to monitor changes in font color using a condition?

---

<div class="post-metadata">

**Author:** ![ajitk](https://forums.distill.io/letter_avatar_proxy/v4/letter/a/ec9cab/32.png) [@ajitk](https://forums.distill.io/u/ajitk)\
**Post date:** [September 26, 2022, 12:22pm UTC](https://forums.distill.io/t/monitor-font-color-change/1273/2 "2022-09-26T12:22:46Z")

</div>

Hello @gostros73,

By default, Distill only tracks changes to text. But some visual changes can be monitored by tracking changes to code if they are done using HTML. Can you share an example of the kind of change you are trying to track so that I can take a look?

---

<div class="post-metadata">

**Author:** ![gostros73](https://forums.distill.io/letter_avatar_proxy/v4/letter/g/d9b06d/32.png) [@gostros73](https://forums.distill.io/u/gostros73)\
**Post date:** [September 26, 2022, 10:51pm UTC](https://forums.distill.io/t/monitor-font-color-change/1273/3 "2022-09-26T22:51:11Z")

</div>

![RG](https://forums.distill.io/uploads/default/original/1X/419ee3a4c5ae83256e5ffdfa0e85a92304e62249.jpeg)

So I have this page that has several columns. I need to monitor the column on the right for change in text color. It can either be Red, Green or Black.

When I inspect the element that is a single row of that column I get this code when the text is red:

---

<div class="post-metadata">

**Author:** ![gostros73](https://forums.distill.io/letter_avatar_proxy/v4/letter/g/d9b06d/32.png) [@gostros73](https://forums.distill.io/u/gostros73)\
**Post date:** [September 26, 2022, 10:54pm UTC](https://forums.distill.io/t/monitor-font-color-change/1273/4 "2022-09-26T22:54:08Z")

</div>

![red](https://forums.distill.io/uploads/default/original/1X/a15421e94b9cf10c0e31e8fc0500c68de6b421fc.jpeg)

---

<div class="post-metadata">

**Author:** ![ajitk](https://forums.distill.io/letter_avatar_proxy/v4/letter/a/ec9cab/32.png) [@ajitk](https://forums.distill.io/u/ajitk)\
**Post date:** [September 27, 2022, 1:06pm UTC](https://forums.distill.io/t/monitor-font-color-change/1273/5 "2022-09-27T13:06:14Z")

</div>

The class in that element makes it very easy to select only those elements that are red. Following CSS selector can be used to do that:

`td.buffer-color-red`

If you are only interested when a text becomes red or the count of red numbers change, it will work really well. Does that help?

---

<div class="post-metadata">

**Author:** ![gostros73](https://forums.distill.io/letter_avatar_proxy/v4/letter/g/d9b06d/32.png) [@gostros73](https://forums.distill.io/u/gostros73)\
**Post date:** [September 28, 2022, 5:30am UTC](https://forums.distill.io/t/monitor-font-color-change/1273/6 "2022-09-28T05:30:34Z")

</div>

![css](https://forums.distill.io/uploads/default/original/1X/64cee9d25408d9517248d5afa21b9e62913d6a17.jpeg)

So do I put that “td.buffer-color-red” in the text field after selecting CSS in the left side?

---

<div class="post-metadata">

**Author:** ![ajitk](https://forums.distill.io/letter_avatar_proxy/v4/letter/a/ec9cab/32.png) [@ajitk](https://forums.distill.io/u/ajitk)\
**Post date:** [September 28, 2022, 7:43am UTC](https://forums.distill.io/t/monitor-font-color-change/1273/7 "2022-09-28T07:43:49Z")

</div>

> [@ajitk](#):
>
> `td.buffer-color-red`

Following screenshot shows how to use a CSS selector (notice the steps 1 and 2 in red):

 ![image](https://forums.distill.io/uploads/default/original/1X/05b0cee5d535e57c969c73fbdb09754d7033c76c.png)

Hope this helps!

---

<div class="post-metadata">

**Author:** ![gostros73](https://forums.distill.io/letter_avatar_proxy/v4/letter/g/d9b06d/32.png) [@gostros73](https://forums.distill.io/u/gostros73)\
**Post date:** [September 28, 2022, 8:00am UTC](https://forums.distill.io/t/monitor-font-color-change/1273/8 "2022-09-28T08:00:02Z")

</div>

> [@ajitk](#):
>
> td.buffer-color-red

This is really close… so with your suggestion, it shows me when red text appears anywhere on the page.

What I need though is to identify a field in the table, and only get alerts when that particular field text turns red.

see screenshot.

Thanks

 ![css red](https://forums.distill.io/uploads/default/original/1X/094f9dd0b47a45ead698f740f8520d243dc13b49.jpeg)

---

<div class="post-metadata">

**Author:** ![ajitk](https://forums.distill.io/letter_avatar_proxy/v4/letter/a/ec9cab/32.png) [@ajitk](https://forums.distill.io/u/ajitk)\
**Post date:** [September 28, 2022, 10:00am UTC](https://forums.distill.io/t/monitor-font-color-change/1273/9 "2022-09-28T10:00:11Z")

</div>

To confirm, do you need to get alert only when the `30SEP` row’s value turns red?

---

<div class="post-metadata">

**Author:** ![gostros73](https://forums.distill.io/letter_avatar_proxy/v4/letter/g/d9b06d/32.png) [@gostros73](https://forums.distill.io/u/gostros73)\
**Post date:** [September 28, 2022, 1:45pm UTC](https://forums.distill.io/t/monitor-font-color-change/1273/10 "2022-09-28T13:45:23Z")

</div>

Yes that’s right. I need to know by date. And just the right column.

---

<div class="post-metadata">

**Author:** ![ajitk](https://forums.distill.io/letter_avatar_proxy/v4/letter/a/ec9cab/32.png) [@ajitk](https://forums.distill.io/u/ajitk)\
**Post date:** [September 30, 2022, 4:43pm UTC](https://forums.distill.io/t/monitor-font-color-change/1273/11 "2022-09-30T16:43:53Z")

</div>

Can you copy that row’s HTML and share here?

---

<div class="post-metadata">

**Author:** ![gostros73](https://forums.distill.io/letter_avatar_proxy/v4/letter/g/d9b06d/32.png) [@gostros73](https://forums.distill.io/u/gostros73)\
**Post date:** [January 2, 2024, 7:29pm UTC](https://forums.distill.io/t/monitor-font-color-change/1273/12 "2024-01-02T19:29:57Z")

</div>

This solution is working well, but it is monitoring color on the entire page. I want to see if I can isolate that to a certain cell. So I tried this but I don’t think its working. Thoughts?

tr:nth-child(7) td:nth-child(4), td.buffer-color-red

---

<div class="post-metadata">

**Author:** ![ajitk](https://forums.distill.io/letter_avatar_proxy/v4/letter/a/ec9cab/32.png) [@ajitk](https://forums.distill.io/u/ajitk)\
**Post date:** [January 3, 2024, 2:51am UTC](https://forums.distill.io/t/monitor-font-color-change/1273/13 "2024-01-03T02:51:51Z")

</div>

Finetuning selections is the way to go when trying to remove unwanted notifications.

> [@gostros73](#):
>
> So I tried this but I don’t think its working. Thoughts?

Is the check erroring out or are you still getting unwanted notifications?

---

<div class="post-metadata">

**Author:** ![gostros73](https://forums.distill.io/letter_avatar_proxy/v4/letter/g/d9b06d/32.png) [@gostros73](https://forums.distill.io/u/gostros73)\
**Post date:** [January 2, 2024, 7:56pm UTC](https://forums.distill.io/t/monitor-font-color-change/1273/14 "2024-01-02T19:56:48Z")

</div>

On a page I monitor, I want to select a table cell and monitor only that cell for a bit of CSS that makes the text a certain color.

It looks like what I am doing, is monitoring the whole page instead of the isolated cell.

td.buffer-color-black

 ![distill1](https://forums.distill.io/uploads/default/original/1X/3d4b706623a01fc04f50c4511216a32d6bda4fc3.jpeg)

---

<div class="post-metadata">

**Author:** ![gostros73](https://forums.distill.io/letter_avatar_proxy/v4/letter/g/d9b06d/32.png) [@gostros73](https://forums.distill.io/u/gostros73)\
**Post date:** [January 2, 2024, 9:13pm UTC](https://forums.distill.io/t/monitor-font-color-change/1273/15 "2024-01-02T21:13:35Z")

</div>

Here is what the element looks like:

```auto
<td ng-repeat="cell in ::fangTableRowCtrl.model.data track by $index" ng-class="::cell.className" ng-switch="::cell._transform.isHtml" class="ng-scope buffer-color-black">
	<!-- ngSwitchWhen: true -->
	<!-- ngSwitchDefault: --><span ng-switch-default="" ng-bind-template="14" class="ng-binding ng-scope">14</span><!-- end ngSwitchWhen: -->
</td>

```

I wish I could select this… and then use global conditions to look for the `class="ng-scope buffer-color-black"`

---

<div class="post-metadata">

**Author:** ![ajitk](https://forums.distill.io/letter_avatar_proxy/v4/letter/a/ec9cab/32.png) [@ajitk](https://forums.distill.io/u/ajitk)\
**Post date:** [January 3, 2024, 3:24am UTC](https://forums.distill.io/t/monitor-font-color-change/1273/16 "2024-01-03T03:24:56Z")

</div>

You can monitor the `outerHTML` property of the selected elements to monitor changes to the `class` attribute. Checkout [https://distill.io/docs/web-monitor/what-is-visual-selector/#how-to-monitor-attribute-and-property-value-for-the-selected-element](https://distill.io/docs/web-monitor/what-is-visual-selector/#how-to-monitor-attribute-and-property-value-for-the-selected-element)

---

<div class="post-metadata">

**Author:** ![gostros73](https://forums.distill.io/letter_avatar_proxy/v4/letter/g/d9b06d/32.png) [@gostros73](https://forums.distill.io/u/gostros73)\
**Post date:** [January 4, 2024, 8:19pm UTC](https://forums.distill.io/t/monitor-font-color-change/1273/17 "2024-01-04T20:19:02Z")

</div>

I guess my question is more along the lines of how can I select multiple items and instead of treating the selections like “OR”, how can I do multiple selections and treat them like “AND”. So if I select two cells, I want both of those criteria to have to be true.

---

<div class="post-metadata">

**Author:** ![ajitk](https://forums.distill.io/letter_avatar_proxy/v4/letter/a/ec9cab/32.png) [@ajitk](https://forums.distill.io/u/ajitk)\
**Post date:** [January 5, 2024, 8:27am UTC](https://forums.distill.io/t/monitor-font-color-change/1273/18 "2024-01-05T08:27:30Z")

</div>

> [@gostros73](#):
>
> how can I select multiple items and instead of treating the selections like “OR”, how can I do multiple selections and treat them like “AND

Can you explain what you mean by “OR” and “AND”?

Note that when combining multiple selectors in one expression, all elements matching all of the combined selectors are selected and monitored for changes.