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

### <a id="grid"></a>Grid

- Grid element

  `vaadin-crud > vaadin-grid`

- Grid element, non-Flow

  `vaadin-crud > vaadin-crud-grid`

- Edit button in grid

  `vaadin-crud-edit`

- Edit button icon

  `vaadin-crud-edit::part(icon)::before`

- Toolbar below grid

  `vaadin-crud::part(toolbar)`

*See [Grid selectors](https://vaadin.com/docs/v24/components/grid/styling.md) for details on styling the grid*

### <a id="sidebottom-edit-panel"></a>Side/Bottom Edit Panel

- CRUD with editor on the side

  `vaadin-crud[editor-position="aside"]`

- CRUD with editor at the bottom

  `vaadin-crud[editor-position="bottom"]`

- Editor panel

  `vaadin-crud::part(editor)`

- Editor scroller (content above toolbar)

  `vaadin-crud::part(scroller)`

- Editor header

  `vaadin-crud::part(header)`

- Editor title

  `vaadin-crud > [slot="header"]`

- Editor form

  `vaadin-crud-form`

- Editor toolbar

  `vaadin-crud::part(toolbar)`

- New item button

  `vaadin-crud > vaadin-button[slot="new-button"]`

- Save button

  `vaadin-crud > vaadin-button[slot="save-button"]`

- Cancel button

  `vaadin-crud > vaadin-button[slot="cancel-button"]`

- Delete button

  `vaadin-crud > vaadin-button[slot="delete-button"]`

### <a id="edit-dialog"></a>Edit Dialog

- Edit dialog element

  `vaadin-crud-dialog-overlay`

- Buttons

  `vaadin-crud-dialog-overlay > vaadin-button`

- Save button

  `vaadin-crud-dialog-overlay > vaadin-button[slot="save-button"]`

- Cancel button

  `vaadin-crud-dialog-overlay > vaadin-button[slot="cancel-button"]`

- Delete button

  `vaadin-crud-dialog-overlay > vaadin-button[slot="delete-button"]`

*See [Dialog selectors](https://vaadin.com/docs/v24/components/dialog/styling.md) for details on styling the dialog*