> Markdown version of [Styling](https://vaadin.com/docs/v24/components/split-layout/styling). Section index: [llms.txt](https://vaadin.com/docs/v24/components/llms.txt)

# 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/v24/styling.md) for more details on how to style components.

- Root element

  `vaadin-split-layout`

### <a id="states"></a>States

- Horizontal split

  `vaadin-split-layout[orientation="horizontal"]`

- Vertical split

  `vaadin-split-layout[orientation="vertical"]`

### <a id="parts"></a>Parts

- Splitter bar

  `vaadin-split-layout::part(splitter)`

- Splitter drag handle

  `vaadin-split-layout::part(handle)`

- Splitter visual handle

  `vaadin-split-layout::part(handle)::after`

- First content

  `vaadin-split-layout > [slot="primary"]`

- Second content

  `vaadin-split-layout > [slot="secondary"]`