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

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

- Overlay mode

  `vaadin-master-detail-layout[overlay]`

- Stack mode

  `vaadin-master-detail-layout[stack]`

- Horizontal orientation

  `vaadin-master-detail-layout[orientation="horizontal"]`

- Vertical orientation

  `vaadin-master-detail-layout[orientation="vertical"]`

- Default (layout) containment

  `vaadin-master-detail-layout[containment="layout"]`

- Viewport containment

  `vaadin-master-detail-layout[containment="viewport"]`

- Layout with detail provided

  `vaadin-master-detail-layout[has-detail]`

### <a id="parts"></a>Parts

- Master area

  `vaadin-master-detail-layout::part(master)`

- Detail area

  `vaadin-master-detail-layout::part(detail)`

- Backdrop in the overlay mode

  `vaadin-master-detail-layout::part(backdrop)`