> Markdown version of [Styling](https://vaadin.com/docs/latest/components/tree-grid/styling). Section index: [llms.txt](https://vaadin.com/docs/latest/components/llms.txt)

# Tree Grid Styling

## <a id="css-selectors"></a>CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the [Styling documentation](https://vaadin.com/docs/latest/styling.md) for more details on how to style components.

> **Important: Not for Shadow DOM**
>
> These selectors should be used in `styles.css` or another stylesheet loaded with the `@StyleSheet` annotation or the `@import` CSS rule. **They do not work in the shadow DOM of Vaadin components**, such as in stylesheets in the `components` sub-folder or loaded with the `@CssImport` annotation’s `themeFor` property.

---

- Root element

  `vaadin-grid`

### <a id="parent-rows"></a>Parent Rows

- Collapsed parent row

  `vaadin-grid::part(collapsed-row)`

- Collapsed parent row cell

  `vaadin-grid::part(collapsed-row-cell)`

- Expanded parent row

  `vaadin-grid::part(expanded-row)`

- Expanded parent row cell

  `vaadin-grid::part(expanded-row-cell)`

### <a id="hierarchy-cells"></a>Hierarchy Cells

- Cell content element

  `vaadin-grid-tree-toggle`

- Expanded

  `vaadin-grid-tree-toggle[expanded]`

- Toggle button

  `vaadin-grid-tree-toggle::part(toggle)`

### <a id="more-properties-and-selectors"></a>More Properties and Selectors

See [Grid](https://vaadin.com/docs/latest/components/grid/styling.md) for more style properties and CSS selectors.