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

### <a id="panels"></a>Panels

- Panel element

  `vaadin-accordion-panel`

- Opened panel

  `vaadin-accordion-panel[opened]`

- Disabled panel

  `vaadin-accordion-panel[disabled]`

- Panel body content wrapper

  `vaadin-accordion-panel::part(content)`

### <a id="panel-heading"></a>Panel Heading

- Heading element

  `vaadin-accordion-heading`

- Toggle

  `vaadin-accordion-heading::part(toggle)`

- Toggle icon

  `vaadin-accordion-heading::part(toggle)::before`

- Panel header content wrapper

  `vaadin-accordion-heading::part(content)`