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

### <a id="cells"></a>Cells

- Cell (any)

  `vaadin-grid-pro::part(cell)`

- Header row cell

  `vaadin-grid-pro::part(header-cell)`

- Body cell

  `vaadin-grid-pro::part(body-cell)`

- Footer row cell

  `vaadin-grid-pro::part(footer-cell)`

- Focused cell

  `vaadin-grid-pro::part(focused-cell)`

- Editable cell

  `vaadin-grid-pro::part(editable-cell)`

- Cell contents

  `vaadin-grid-cell-content`

- Cell in first column

  `vaadin-grid-pro::part(first-column-cell)`

- Cell in last column

  `vaadin-grid-pro::part(last-column-cell)`

- Cell in first row

  `vaadin-grid-pro::part(first-row-cell)`

- Cell in last column

  `vaadin-grid-pro::part(last-row-cell)`

- Cell in odd row

  `vaadin-grid-pro::part(odd-row-cell)`

- Cell in even row

  `vaadin-grid-pro::part(even-row-cell)`

- Cell in selected row

  `vaadin-grid-pro::part(selected-row-cell)`

- Cell in first header row

  `vaadin-grid-pro::part(first-header-row-cell)`

- Cell in last header row

  `vaadin-grid-pro::part(last-header-row-cell)`

- Cell focus ring

  `vaadin-grid::part(cell)::before`

- Row focus ring

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

### <a id="selection-checkboxes"></a>Selection Checkboxes

- Row selection checkbox

  `vaadin-grid-pro > vaadin-checkbox`

- Select All checkbox

  `vaadin-grid-pro > #selectAllCheckbox`

### <a id="sorters"></a>Sorters

- Element

  `vaadin-grid-sorter`

- Active sorter

  `vaadin-grid-sorter[direction]`

- Column header content

  `vaadin-grid-sorter::part(content)`

- Sort indicators

  `vaadin-grid-sorter::part(indicators)`

- Sort indicator icons

  `vaadin-grid-sorter::part(indicators)::before`

- Sort order indicator

  `vaadin-grid-sorter::part(order)`

### <a id="item-details"></a>Item Details

- Item details cell (spans entire row)

  `vaadin-grid-pro::part(details-cell)`

- Cell in row with open details

  `vaadin-grid-pro::part(details-open-row-cell)`

- Row with open details

  `vaadin-grid-pro::part(details-open-row)`

### <a id="editors"></a>Editors

- Text field editor

  `vaadin-grid-pro-edit-text-field`

- Checkbox editor

  `vaadin-grid-pro-edit-checkbox`

- Select editor

  `vaadin-grid-pro-edit-select`

*See [Text Field](https://vaadin.com/docs/v24/components/text-field/styling.md), [Select](https://vaadin.com/docs/v24/components/select/styling.md) and [Checkbox](https://vaadin.com/docs/v24/components/checkbox/styling.md) selectors for details on styling the editors*