# The colour in/on this isn't changing. (CSS)

**URL:** <https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639>\
**Category:** Dashboard\
**Created:** [10 March 2022 08:11 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639 "2022-03-10T08:11:09Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [10 March 2022 08:11 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/1 "2022-03-10T08:11:09Z")

</div>

Sorry folks, I was given this a long time ago to address a question I had and now I am trying to apply it, it isn't working.

Not blaming the person who gave it to me. It is probably something on my machine.

(But before we go there - a question which this has kind of raised)

There are 3 _levels_ of CSS.... and typically now I am trying to find my notes: I can't.  
But basically as I remember it there are: _inline_ - applies to code in that line. _page_ which applies to that page (tab?) and lastly _global_ which is.... global.

And the priority is reversed in application as in global is applied to all.  
But then is there is something for that _page_ it overwrites the global settings and lastly if there is something _inline_ it overwrites the other two.

If I am wrong, then that's why it isn't working.

So the code:

```auto
[{"id":"d9c05df8e5f12ca0","type":"ui_text","z":"0918ee609bf69fc7","group":"924a2dc07ecdd1a4","order":0,"width":0,"height":0,"name":"group1","label":"Some widgets here","format":"Some widgets here","layout":"col-center","x":980,"y":140,"wires":[]},{"id":"8e80beb59e380f96","type":"ui_text","z":"0918ee609bf69fc7","group":"924a2dc07ecdd1a4","order":0,"width":0,"height":0,"name":"group1","label":"Some widgets here","format":"Some widgets here","layout":"col-center","x":980,"y":100,"wires":[]},{"id":"bf67ca0eb24dac61","type":"ui_template","z":"0918ee609bf69fc7","group":"924a2dc07ecdd1a4","name":"group1","order":7,"width":0,"height":0,"format":"<style>\n .group1 p.nr-dashboard-cardtitle {\n color: {{msg.payload}} !important ;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":800,"y":120,"wires":[[]],"info":"<style>\r\n.mplug17 p.nr-dashboard-cardtitle {\r\n color: green !important;\r\n }\r\n</style>"},{"id":"58d9e91c3691c384","type":"inject","z":"0918ee609bf69fc7","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"red","payloadType":"str","x":610,"y":100,"wires":[["bf67ca0eb24dac61"]]},{"id":"43040dbea39ee0d9","type":"inject","z":"0918ee609bf69fc7","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"lime","payloadType":"str","x":610,"y":140,"wires":[["bf67ca0eb24dac61"]]},{"id":"924a2dc07ecdd1a4","type":"ui_group","name":"group1","tab":"9e1ed5e519ff655f","order":1,"disp":true,"width":"6","collapse":true},{"id":"9e1ed5e519ff655f","type":"ui_tab","name":"TEST","icon":"dashboard","order":39,"disabled":false,"hidden":false}]

```

machine details:  
NR 2.1.4  
Dashboard 2.28.1  
Ubuntu 21.04  
Firefox

Dashboard settings:

`Use angular theme in ui_template`

The screen font is the _default_ bluish colour.  
Pressing either of the `inject` nodes, no change visible.

Sorry for leaving it this long to respond, but other things have been happening.

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 March 2022 08:27 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/2 "2022-03-10T08:27:45Z")

</div>

Use CSS classes...

![chrome_4Df5lPLPQT](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/7/d7d1e7f8f78444efc1e5640d3a8a1a043a1c19d2.gif)

```auto
[
    {
        "id": "d9c05df8e5f12ca0",
        "type": "ui_text",
        "z": "7c13b8452619581b",
        "group": "924a2dc07ecdd1a4",
        "order": 0,
        "width": 0,
        "height": 0,
        "name": "group1",
        "label": "Some widgets here",
        "format": "Some widgets here",
        "layout": "col-center",
        "className": "lime-text",
        "x": 1534,
        "y": 304,
        "wires": []
    },
    {
        "id": "8e80beb59e380f96",
        "type": "ui_text",
        "z": "7c13b8452619581b",
        "group": "924a2dc07ecdd1a4",
        "order": 0,
        "width": 0,
        "height": 0,
        "name": "group1",
        "label": "Some widgets here",
        "format": "Some widgets here",
        "layout": "col-center",
        "className": "lime-text",
        "x": 1534,
        "y": 256,
        "wires": []
    },
    {
        "id": "58d9e91c3691c384",
        "type": "inject",
        "z": "7c13b8452619581b",
        "name": "className=lime-text",
        "props": [
            {
                "p": "className",
                "v": "lime-text",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 1354,
        "y": 256,
        "wires": [
            [
                "d9c05df8e5f12ca0",
                "8e80beb59e380f96"
            ]
        ]
    },
    {
        "id": "e079ac245b22b6e2",
        "type": "inject",
        "z": "7c13b8452619581b",
        "name": "className=red-text",
        "props": [
            {
                "p": "className",
                "v": "red-text",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 1354,
        "y": 304,
        "wires": [
            [
                "8e80beb59e380f96",
                "d9c05df8e5f12ca0"
            ]
        ]
    },
    {
        "id": "29b425b84283b9f2",
        "type": "ui_template",
        "z": "7c13b8452619581b",
        "group": "81dd3718.b97888",
        "name": "head styles",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<style id=\"text-colours\">\n .lime-text {\n color: lime !important;\n }\n .red-text {\n color: red !important;\n }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 1510,
        "y": 208,
        "wires": [
            []
        ]
    },
    {
        "id": "924a2dc07ecdd1a4",
        "type": "ui_group",
        "name": "group1",
        "tab": "9e1ed5e519ff655f",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": true,
        "className": ""
    },
    {
        "id": "81dd3718.b97888",
        "type": "ui_group",
        "name": "Active Alarms",
        "tab": "4e11db25.239e94",
        "order": 1,
        "disp": true,
        "width": 13,
        "collapse": true
    },
    {
        "id": "9e1ed5e519ff655f",
        "type": "ui_tab",
        "name": "TEST",
        "icon": "dashboard",
        "order": 39,
        "disabled": false,
        "hidden": false
    },
    {
        "id": "4e11db25.239e94",
        "type": "ui_tab",
        "name": "Alarms Monitiring",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [10 March 2022 08:35 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/3 "2022-03-10T08:35:20Z")

</div>

Thanks @Steve-Mcl, but it would seen the meaning was lost....

I am wanting to change the colour of the _title_ text.

So it is this font colour I want to change....

![Screenshot from 2022-03-10 19-33-54](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/e/fe0eabe633db6b40dbe111f0c85cf233ceb37a5d.png)

Being brought about so if the group is collapsed and something happens, the text colour would change.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [10 March 2022 08:45 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/4 "2022-03-10T08:45:15Z")

</div>

I was shown another way a long time ago, but can't find it that also changed the icon/triangle also.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 March 2022 09:04 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/5 "2022-03-10T09:04:13Z")

</div>

> [@Trying\_to\_learn](#):
>
> Thanks @Steve-Mcl, but it would seen the meaning was lost.

Probably the mahoosive description (🤣 couldnt resist 🤣)

Ok, this is a bit tougher and I dont have time to knock up a demo - but the jist of a solution would be to use some client side JS..

- in a ui-template node, intercept the msg.payload (e.g. send a msg with the className to add, className to remove & the CSS selector of the group),
- get a jQuery object for the selector and call `.addClass` and `.removeClass` as appropriate.

The better (longer term) fix is to raise a FR issue on Dashboard to ask for a simple way to set a "ui-group" nodes `className` via the `ui_control` object or via the `ui-control` node.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [10 March 2022 09:08 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/6 "2022-03-10T09:08:19Z")

</div>

Thanks.

As I said in my latter post, someone did post an example that even changed the icon as well.

It wasn't massive or complicated (as in it was not squillions of nodes) but it was a LONG time ago and I suffered a massive machine crash since then so don't have the code.

(What's a `FR issue`?)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 March 2022 09:09 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/7 "2022-03-10T09:09:53Z")

</div>

Sorry. FR = Feature Request. I.e. ask for new feature on dashboard github repo suggesting that we have a means to set a ui-groups class dynamically (possibly using ui\_control object or the ui-control node)

It would greatly simplify what you are asking for.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [10 March 2022 09:12 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/8 "2022-03-10T09:12:47Z")

</div>

Sorright.

But as far as I know it is do-able.

It is just as things have developed having open groups is taking way too much screen space and having the collapsed is problematic as if the group updates, I don't know.

So I want the font colour to change is something gets sent to it.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [10 March 2022 09:15 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/9 "2022-03-10T09:15:12Z")

</div>

Just looking at the code I posted and the _Help_ screen, things don't add up.

code:

```auto
<style>
    .group2 p.nr-dashboard-cardtitle {
        color:{{msg.payload}} !important;
    }
</style>

```

Ok, but in the _help_ screen it shows this:

```auto
<div layout="row" layout-align="space-between">
  <p>The number is</p>
  <font color="{{((msg.payload || 0) % 2 === 0) ? 'green' : 'red'}}">
    {{(msg.payload || 0) % 2 === 0 ? 'even' : 'odd'}}
  </font>
</div>

```

But the structure does my head in with what they are doing.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [10 March 2022 09:38 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/10 "2022-03-10T09:38:10Z")

</div>

Here you are.

This does affect only one card `"#TEST_group1_cards"` selects card if it is in tab `TEST` and has group name `group1`

```auto
[{"id":"bf67ca0eb24dac61","type":"ui_template","z":"459b55a5baccf138","group":"924a2dc07ecdd1a4","name":"group1","order":7,"width":0,"height":0,"format":"<script> \n (function(scope) { \n scope.$watch('msg', function(msg) {\n if (msg) {\n \n $(\"#TEST_group1_cards\").closest(\"ui-card-panel\").find(\".nr-dashboard-cardtitle\").css('color',msg.payload);\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"colorChanger","x":460,"y":2660,"wires":[[]],"info":"<style>\r\n.mplug17 p.nr-dashboard-cardtitle {\r\n color: green !important;\r\n }\r\n</style>"},{"id":"58d9e91c3691c384","type":"inject","z":"459b55a5baccf138","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"red","payloadType":"str","x":270,"y":2640,"wires":[["bf67ca0eb24dac61"]]},{"id":"43040dbea39ee0d9","type":"inject","z":"459b55a5baccf138","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"lime","payloadType":"str","x":270,"y":2680,"wires":[["bf67ca0eb24dac61"]]},{"id":"924a2dc07ecdd1a4","type":"ui_group","name":"group1","tab":"9e1ed5e519ff655f","order":1,"disp":true,"width":"6","collapse":true},{"id":"9e1ed5e519ff655f","type":"ui_tab","name":"TEST","icon":"dashboard","order":39,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [10 March 2022 11:44 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/11 "2022-03-10T11:44:10Z")

</div>

Andrew, the CSS code you posted first:

```auto
    .group1 p.nr-dashboard-cardtitle {
        color: {{msg.payload}} !important ;
    }

```

is almost correct.  
If you look at the Inspector utility in your browser you should see something like this (this is from Firefox, other browsers may look a bit different)

 ![Untitled 1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/c/9c43045ee93ff9ce79835aea30d16316a3ab991e.jpeg)

The ui-card-panel has **id="TEST\_group1"** (the tab is TEST and the group is group1)  
It's an **id** not a **class** so your CSS selector should start with **#** not **.**  
And you need **TEST\_group1** rather than just **group1**.

So

```auto
    #TEST_group1 p.nr-dashboard-cardtitle {
        color: {{msg.payload}};
    }

```

You do not in this case need !important.  
Nor do you need the javascript function that @hotNipi suggested. I _think_ the {{ ... }} syntax makes it unnecessary.

 ![Untitled 2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/a/0ae4b2a6374db1042ca568da9a6605d9046a07d9.jpeg)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [10 March 2022 20:10 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/12 "2022-03-10T20:10:05Z")

</div>

Thanks both.

What I now realise that I sort of forgot to include in the question.

So the application of it to what I am wanting to do:

These tabs will have (usually or mostly) text lists in them showing things that have happened.

So I can see how to apply half the stuff I want to do.

The group is collapsed. The colour is ... _green_ (green, good).  
Something happens and there are things displayed (well poor choice of words, but I hope you understand what I mean).  
The title turns _red_ (alert) and I am notified there are things needing to be looked at.

I open the group.  
Is there a way to detect this happening? Because then I would like the colour to change back to _green_.  
the only way I can think of getting it done is having a button included in/on the tab to reset the colour.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [10 March 2022 20:20 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/13 "2022-03-10T20:20:46Z")

</div>

Ok, so I need the full name as in: `TEST_group1` because the original one was only `group1` and that can't work as it is not known _which_ `group1`.....

So I changed the node to:

```auto
<style>
    #TEST_group1 p.nr-dashboard-cardtitle {
        color: {{msg.payload}};
    }
</style>

```

But sorry that doesn't work. 😕

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [10 March 2022 20:37 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/14 "2022-03-10T20:37:28Z")

</div>

Is your tab still called TEST?  
Is your group still called group1?  
Is the template which contains the CSS styling assigned to a group on the TEST tab?

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [10 March 2022 20:40 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/15 "2022-03-10T20:40:12Z")

</div>

Well I was talking within the scope of this example.

Just because it would seem that I forgot to make the _path_ complete by the prefix of `TEST`.  
Yes, they are still called those names.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [10 March 2022 20:42 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/16 "2022-03-10T20:42:57Z")

</div>

I will post a working example but I have to mend my computer power supply first.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [10 March 2022 20:48 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/17 "2022-03-10T20:48:16Z")

</div>

Don't worry too much. Not that I am wanting to start a squabble about _Who's code is better_.

I only brought it up as I kind of get what you mean....

But from memory there is some _trick_ about classes in `CSS` where you can start with a `.` in the name if it is _local_...

I can't find my notes so I am really taxing the memory.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [10 March 2022 20:57 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/18 "2022-03-10T20:57:28Z")

</div>

The CSS definition starts with a dot if it relates to a class.

```auto
<div class="Fred">
<p>Hello world</p>
</div>

```

It starts with a # if it relates to an id

```auto
<div id="Mary">
<p>Hello world</p>
</div>

```

There can only be one div with id Mary on the page, but there can be many div's with class Fred

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [10 March 2022 21:03 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/19 "2022-03-10T21:03:33Z")

</div>

Yeah, I'm still fumbling on the _hierarchy_ of the names/terms.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [10 March 2022 21:45 UTC](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/20 "2022-03-10T21:45:55Z")

</div>

> [@jbudd](#):
>
> There can only be one div with id Mary on the page

Even if it is documented in the way  
_The HTML `id` attribute is used to specify a unique id for an HTML element._  
_You cannot have more than one element with the same id in an HTML document._

... the HTML does not complain. There will be no errors anywhere if there is multiple elements with same id. And the CSS will select them all and applies. There will be mess if you try to manipulate the content of one of those elements using JavaScript. You just cant do it cos they are not unique.

So it is kind of developer responsibility to make sure the uniqueness of the elements is guaranteed.

The [CSS selectors](https://www.w3schools.com/cssref/css_selectors.asp) are very well documented and it takes just to read carefully why and how the rules apply. And then just practice.

Like this little example:

Guess (without trying out first) what is the output of this little combination of html and css

```auto
<div class="rect outer">
    <div class="rect middle">
        <div class="rect inner"></div>
    </div>
</div>

<style>
.rect{
    background:red;
    width:30px;
    height:30px;
}
.inner{
    background:blue;
}
.middle{
    background:orange;
}
.outer .inner{
    background:initial;
}
.middle .inner{
    background:none;
}
.outer .middle{
    background:inherit;
}
.outer .middle .inner{
    background:unset;
}
.outer.middle.inner{
    background:white !important;
}
</style>

```

[Next page](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639.md?page=2)