> Markdown version of [Styling](https://vaadin.com/docs/v24/components/message-list/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="list"></a>List

- Root element

  `vaadin-message-list`

- Internal list layout

  `vaadin-message-list::part(list)`

### <a id="message"></a>Message

- Root element

  `vaadin-message`

- Text content layout

  `vaadin-message::part(content)`

- Header row

  `vaadin-message::part(header)`

- Name

  `vaadin-message::part(name)`

- Timestamp

  `vaadin-message::part(time)`

- Message text

  `vaadin-message::part(message)`

#### <a id="avatars"></a>Avatars

- Avatar

  `vaadin-message > vaadin-avatar`

- Avatar icon

  `vaadin-message > vaadin-avatar::part(icon)`

- Avatar abbreviation

  `vaadin-message > vaadin-avatar::part(abbr)`