# Different \<style\> in different templates nodes in the same dashboard

**URL:** <https://discourse.nodered.org/t/different-style-in-different-templates-nodes-in-the-same-dashboard/5063>\
**Category:** Dashboard\
**Created:** [20 November 2018 10:01 UTC](https://discourse.nodered.org/t/different-style-in-different-templates-nodes-in-the-same-dashboard/5063 "2018-11-20T10:01:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![roberto.zeni](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/roberto.zeni/32/3226_2.png) [@roberto.zeni](https://discourse.nodered.org/u/roberto.zeni)\
**Post date:** [20 November 2018 10:01 UTC](https://discourse.nodered.org/t/different-style-in-different-templates-nodes-in-the-same-dashboard/5063/1 "2018-11-20T10:01:56Z")

</div>

Hi guys,

I'm a newbie of NodeRed and I'm trying to build some HTML table using Template nodes.

I create many different table in dashboard using a template node for each one.

Now I would like to alternate color in rows and I use the following piece of code:

**tr:nth-child(even) {**  
\*\* background-color: #efecca;\*\*  
**}**

All works well but I note that this behavior are applied to all table in the dashboard even if the other nodes do not contain the code.

How is it possible to apply the only in one node?

Thanks

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [20 November 2018 11:23 UTC](https://discourse.nodered.org/t/different-style-in-different-templates-nodes-in-the-same-dashboard/5063/2 "2018-11-20T11:23:53Z")

</div>

You need to target your css to the template more accurately. Typically you have a dive within your template to which you can assign an id=.... then get the css to target tr within that.

---

<div class="post-metadata">

**Author:** ![roberto.zeni](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/roberto.zeni/32/3226_2.png) [@roberto.zeni](https://discourse.nodered.org/u/roberto.zeni)\
**Post date:** [20 November 2018 11:38 UTC](https://discourse.nodered.org/t/different-style-in-different-templates-nodes-in-the-same-dashboard/5063/3 "2018-11-20T11:38:29Z")

</div>

Thanks for reply!

Where is it possible to find an example?

Thanks again

Roberto

---

<div class="post-metadata">

**Author:** ![Marooned](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marooned/32/2858_2.png) [@Marooned](https://discourse.nodered.org/u/Marooned)\
**Post date:** [20 November 2018 11:57 UTC](https://discourse.nodered.org/t/different-style-in-different-templates-nodes-in-the-same-dashboard/5063/4 "2018-11-20T11:57:37Z")

</div>

[Similar post](https://discourse.nodered.org/t/updating-template-one-variable-at-a-time/4546/8). Just add a wrapper around your code with unique class/ID

```auto
<style>
/* instead of current */
.foo {...}
/* add wrapper */
.unique-wrapper-name .foo {...}
</style>
<div class="unique-wrapper-name">
  <div class="foo">your actual code here</div>
</div>

```

---

<div class="post-metadata">

**Author:** ![roberto.zeni](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/roberto.zeni/32/3226_2.png) [@roberto.zeni](https://discourse.nodered.org/u/roberto.zeni)\
**Post date:** [20 November 2018 19:44 UTC](https://discourse.nodered.org/t/different-style-in-different-templates-nodes-in-the-same-dashboard/5063/5 "2018-11-20T19:44:31Z")

</div>

I don't understand how modify my code below for apply style only in current node.  
I'm very newbie...

```auto
<style>

tr:nth-of-type(odd) {
    background: white;
}

tr:nth-of-type(even) {
    background: yellow;
}

</style>

<table style="width:100%">
  <tr>
    <th>Codice</th>
    <th>Descrizione</th> 
  </tr>
  <tr ng-repeat="x in msg.payload | limitTo:100">
    <td>{{msg.payload[$index].CODICE}}</td>
    <td>{{msg.payload[$index].DESC}}</td>
  </tr>
</table>

```

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [20 November 2018 22:18 UTC](https://discourse.nodered.org/t/different-style-in-different-templates-nodes-in-the-same-dashboard/5063/6 "2018-11-20T22:18:27Z")

</div>

I would add classes to your table, like so:

```auto
<table class="odd-rows-white even-rows-yellow" style="width:100%">

```

Then your CSS rules can target rows in only the tables that have those class, like so:

```auto
<style>
  table.odd-rows-white tr:nth-of-type(odd) {
    background: white;
  }
  table.even-rows-yellow tr:nth-of-type(even) {
    background: yellow;
  }
</style>

```

If you include these "custom" styles in a single `ui_template` node, and check the box for "Added to Site `<head>` section" then it can apply to all of your dashboard templates -- so you don't have to repeat the styles in every `ui_template` node.