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

### <a id="tabsheet"></a>Tabsheet

- Root element

  `vaadin-tabsheet`

- Tabs wrapper

  `vaadin-tabsheet::part(tabs-container)`

- Content wrapper

  `vaadin-tabsheet::part(content)`

- Content loading indicator

  `vaadin-tabsheet::part(loader)`

### <a id="tabs"></a>Tabs

- Root element

  `vaadin-tabs`

- Horizontal tabs

  `vaadin-tabs[orientation="horizontal"]`

- Vertical tabs

  `vaadin-tabs[orientation="vertical"]`

- Tab container

  `vaadin-tabs::part(tabs)`

- Back button

  `vaadin-tabs::part(back-button)`

- Back button icon

  `vaadin-tabs::part(back-button)::after`

- Forward button

  `vaadin-tabs::part(forward-button)`

- Forward button icon

  `vaadin-tabs::part(forward-button)::after`

### <a id="tab"></a>Tab

- Root element

  `vaadin-tab`

- Selected

  `vaadin-tab[selected]`

- Focused

  `vaadin-tab[focused]`

- Keyboard focused

  `vaadin-tab[focus-ring]`

- Pressed

  `vaadin-tab[active]`

- Hovered

  `vaadin-tab:hover`

- Disabled

  `vaadin-tab[disabled]`

- Selection indicator

  `vaadin-tab::before`

- Icon in tab

  `vaadin-tab > vaadin-icon`