# Useful CSS Stuff

**URL:** <https://forum.inductiveautomation.com/t/useful-css-stuff/95414>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 2, 2024, 1:58am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414 "2024-09-02T01:58:19Z")\
**Posts on this page:** 1\
**Showing post:** 47

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 5, 2025, 2:25am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/47 "2025-11-05T02:25:25Z")

</div>

# Styling Tree Component Items

I forgot to add this here a while ago.. Here’s some useful stuff for styling the Tree component.

```css

/ *********************** /
/* Tree View Component */

/* Select tree items that contain specific text E.g. "UPDATE"*/
.tree-item[data-label*="UPDATE"] {
  background-color: aliceblue;
}

/* Select tree items that contain text "UPDATE" and any of its child nodes */
.parent-node:has(> .tree-row .tree-item[data-label*="UPDATE"]), .tree-item[data-label*="UPDATE"] {
  background-color: aliceblue;
}

/* Select the child nodes of tree items that contain text "UPDATE" */
   Does not select the item that contains "UPDATE" itself. */
.parent-node:has(> .tree-row .tree-item[data-label*="UPDATE"]) {
  background-color: aliceblue;
}

/* Select items that use a specific icon */
.tree-row:has(svg[data-icon="material/functions"]) {
  background-color:lightslategray;
  color:#fff;
  font-weight: bold;
}

/* Change the "hover" style of items */
.ia_treeComponent__node:hover:not(.ia_treeComponent__node--selected) {
  background-color: #ffda3344 !important;
}

```

Example (bold and aliceblue background for rows that contain the “material/functions” svg icon):

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

To apply these styles below to only Tree components with a specific Perspective Style class assigned, add the psc path to the start, separated by a space. e.g. this part `.psc-Components\/EndNodeOpacity `below:

```python
/* Applies this style to Tree components with the "Components/EndNodeOpacity" Perspective Style applied */
.psc-Components\/EndNodeOpacity .tree-item[data-label*="UPDATE"] {
    background-color: aliceblue;
}

```

---

_[View the full topic](https://forum.inductiveautomation.com/t/useful-css-stuff/95414)._