> Markdown version of [Styling](https://vaadin.com/docs/v24/components/details/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-details`

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

- Opened panel

  `vaadin-details[opened]`

- Disabled panel

  `vaadin-details[disabled]`

### <a id="summary"></a>Summary

- Panel header (a.k.a. summary)

  `vaadin-details-summary`

- Toggle

  `vaadin-details-summary::part(toggle)`

- Toggle icon

  `vaadin-details-summary::part(toggle)::before`

- Summary content wrapper

  `vaadin-details-summary::part(content)`

- Opened details summary

  `vaadin-details-summary[opened]`

- Disabled details summary

  `vaadin-details-summary[disabled]`

### <a id="content"></a>Content

- Collapsible content wrapper

  `vaadin-details::part(content)`