# Change child style in tree structure

**URL:** <https://forum.inductiveautomation.com/t/change-child-style-in-tree-structure/62391>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [July 28, 2022, 7:19am UTC](https://forum.inductiveautomation.com/t/change-child-style-in-tree-structure/62391 "2022-07-28T07:19:48Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![jeroen\_smits](https://avatars.discourse-cdn.com/v4/letter/j/f14d63/32.png) [@jeroen\_smits](https://forum.inductiveautomation.com/u/jeroen_smits)\
**Post date:** [July 28, 2022, 7:19am UTC](https://forum.inductiveautomation.com/t/change-child-style-in-tree-structure/62391/1 "2022-07-28T07:19:48Z")

</div>

Hello everyone,

I want to change the style per element in the tree component. does anyone know if this is possible?

my case:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/b/5b4e948e5dbbd6dc445f8b62668118bba36be057.png)

I want to change the style of the yellow marked child in my tree structure to underline the text and make the text blue so it looks like a hyperlink.

thanks in advance

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [July 28, 2022, 8:20am UTC](https://forum.inductiveautomation.com/t/change-child-style-in-tree-structure/62391/2 "2022-07-28T08:20:54Z")

</div>

I tried adding `color : blue` to Grandchild 2 in the default items of the Tree component and got message,

> items[0].items[0].items[1].color: is not defined in the schema and additional properties are not allowed

I'd say the answer is 'no'.

---

<div class="post-metadata">

**Author:** ![jeroen\_smits](https://avatars.discourse-cdn.com/v4/letter/j/f14d63/32.png) [@jeroen\_smits](https://forum.inductiveautomation.com/u/jeroen_smits)\
**Post date:** [July 28, 2022, 8:22am UTC](https://forum.inductiveautomation.com/t/change-child-style-in-tree-structure/62391/3 "2022-07-28T08:22:26Z")

</div>

yep i got the same error message when i added “style” to the grandchild

unfortunate that I can not change it this way

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 28, 2022, 8:43am UTC](https://forum.inductiveautomation.com/t/change-child-style-in-tree-structure/62391/4 "2022-07-28T08:43:12Z")

</div>

You want only the yellow line or every 3th line?

---

<div class="post-metadata">

**Author:** ![jeroen\_smits](https://avatars.discourse-cdn.com/v4/letter/j/f14d63/32.png) [@jeroen\_smits](https://forum.inductiveautomation.com/u/jeroen_smits)\
**Post date:** [July 28, 2022, 8:45am UTC](https://forum.inductiveautomation.com/t/change-child-style-in-tree-structure/62391/5 "2022-07-28T08:45:24Z")

</div>

every third but its build in a script so if I figure out how to do one, I guess it will work for all

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 28, 2022, 8:50am UTC](https://forum.inductiveautomation.com/t/change-child-style-in-tree-structure/62391/6 "2022-07-28T08:50:12Z")

</div>

Will it always be ? If so some css can solve this

```auto
- item
    -1
    -2
    -3
- item
    -1
    -2
    -3

```

---

<div class="post-metadata">

**Author:** ![jeroen\_smits](https://avatars.discourse-cdn.com/v4/letter/j/f14d63/32.png) [@jeroen\_smits](https://forum.inductiveautomation.com/u/jeroen_smits)\
**Post date:** [July 28, 2022, 8:52am UTC](https://forum.inductiveautomation.com/t/change-child-style-in-tree-structure/62391/7 "2022-07-28T08:52:22Z")

</div>

yes it will always be 3rd rule. can you explain how you came to the picture case?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 28, 2022, 9:02am UTC](https://forum.inductiveautomation.com/t/change-child-style-in-tree-structure/62391/8 "2022-07-28T09:02:08Z")

</div>

You can inject this css into a styles backgroundimage (make sure the name matches the `psc-Name`

```auto
} .psc-underline3thTreeElement div[data-item-path$="/2"] .text-scroll { color: blue; text-decoration: underline; }{

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/e/9e586c663e71529ca4c04009e8ac80d459307f18.png)

---

<div class="post-metadata">

**Author:** ![jeroen\_smits](https://avatars.discourse-cdn.com/v4/letter/j/f14d63/32.png) [@jeroen\_smits](https://forum.inductiveautomation.com/u/jeroen_smits)\
**Post date:** [July 28, 2022, 9:08am UTC](https://forum.inductiveautomation.com/t/change-child-style-in-tree-structure/62391/9 "2022-07-28T09:08:05Z")

</div>

> [@victordcq](#):
>
> `underline3thTreeElement`

got it working!!! thank you very much

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 28, 2022, 9:09am UTC](https://forum.inductiveautomation.com/t/change-child-style-in-tree-structure/62391/10 "2022-07-28T09:09:45Z")

</div>

Graag gedaan 😉

---

<div class="post-metadata">

**Author:** ![gerardopignatiello96](https://avatars.discourse-cdn.com/v4/letter/g/df788c/32.png) [@gerardopignatiello96](https://forum.inductiveautomation.com/u/gerardopignatiello96)\
**Post date:** [May 23, 2023, 8:15am UTC](https://forum.inductiveautomation.com/t/change-child-style-in-tree-structure/62391/12 "2023-05-23T08:15:42Z")

</div>

Hi @victordcq ,how do you know the css code of the component and then apply the changes?

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [May 23, 2023, 8:24am UTC](https://forum.inductiveautomation.com/t/change-child-style-in-tree-structure/62391/13 "2023-05-23T08:24:51Z")

</div>

To find the selectors, use the dev tools in a browser (ctrl + shit + i).  
There's an element tab that allows you to browse the DOM, and a little icon that allows you to select a specific element to find it in the tree (or press ctrl + shit + c):  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/7/c77ed2fbf6a1cc8a0c098473df14d6748fde2e49.png)

for example, if I want to target the reply button of your comment:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/a/ea7143cdf93569ed0ed95c39561b52de1b07ab19.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/7/2768da15d2e6299a400c2ebead103a4b48d87631.png)

Now I know I can target the element with `id="post_12"` to make sure I'm in the scope of your message, then I can target the button with class `reply`:  
`#post_12 button.reply`

To apply css to it, you go to your css stylesheet (since 8.1.21 I believe ?) then add something like this:

```css
#post_12 button.reply {
  property: value;
}

```

---

<div class="post-metadata">

**Author:** ![gerardopignatiello96](https://avatars.discourse-cdn.com/v4/letter/g/df788c/32.png) [@gerardopignatiello96](https://forum.inductiveautomation.com/u/gerardopignatiello96)\
**Post date:** [May 23, 2023, 9:18am UTC](https://forum.inductiveautomation.com/t/change-child-style-in-tree-structure/62391/14 "2023-05-23T09:18:47Z")

</div>

thank you @pascal.fragnoud , very clear 🙂  
Do you think it is possible to have two icons in the tree component item ?

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [May 23, 2023, 9:24am UTC](https://forum.inductiveautomation.com/t/change-child-style-in-tree-structure/62391/15 "2023-05-23T09:24:06Z")

</div>

css doesn't add elements to the DOM, it changes their appearance.  
So if there are settings for only one icon... you'll only get one icon.

You could use some js injection through the markdown component to add an icon element, but frankly... I wouldn't do that for an icon.

---

<div class="post-metadata">

**Author:** ![gerardopignatiello96](https://avatars.discourse-cdn.com/v4/letter/g/df788c/32.png) [@gerardopignatiello96](https://forum.inductiveautomation.com/u/gerardopignatiello96)\
**Post date:** [May 23, 2023, 9:39am UTC](https://forum.inductiveautomation.com/t/change-child-style-in-tree-structure/62391/16 "2023-05-23T09:39:40Z")

</div>

I see, the solution could be to modify the component with JDK

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [May 23, 2023, 10:04am UTC](https://forum.inductiveautomation.com/t/change-child-style-in-tree-structure/62391/17 "2023-05-23T10:04:28Z")

</div>

you can add content with css, using `content` in a `:before` or `:after`. you could then add a background icons to it  
in the example i do use js-injection, but only because it has te be dynamic according to the dropdown. you can make it fixed too depending on what its for.

> [@\[FEATURE\] Add ability to add Icon and styling to Perspective Dropdown items](https://forum.inductiveautomation.com/t/feature-add-ability-to-add-icon-and-styling-to-perspective-dropdown-items/73823/8):
>
> ```auto
> .iaDropdownCommon_options [data-label='YourLabel']:before { padding:10px; content:' '; background-image: url('/data/perspective/icons/material.svg#insert_emoticon');	}
> 
> ```

like you could target every 3th element of a tree too, like in the original question