> Markdown version of [Styling Component Instances](https://vaadin.com/docs/v24/styling/styling-components/styling-component-instances). Section index: [llms.txt](https://vaadin.com/docs/v24/styling/llms.txt)
# Styling Component Instances
Sometimes you need to apply different styles to specific *instances* of a component, instead of all components of a particular type. This can be done by applying a CSS class name to the components and using that in your CSS selector, or by scoping the styles to components contained in a particular parent element.
## Applying CSS to Component Instances
CSS can be scoped to specific component instances by applying CSS class names to the components with the `addClassName` method and adding them to the HTML element selector prefixed with a period, as shown in the example here:
**Flow**
```java
TextField tf = new TextField();
tf.addClassName("bordered");
```
**React**
```tsx
```
**Lit**
```html
```
```css
vaadin-text-field.bordered::part(input-field) {
background: white;
border: 1px solid gray;
}
```
> **Note: CSS Class Names**
>
> CSS class names are identifier-attributes applied to HTML elements to scope CSS styling to them. The same class name can be applied to multiple elements, and each element can have multiple class names. They have nothing to do with Java or TypeScript classes.
Components with overlay elements – like Combo Box, Date Picker, and Menu Bar – have a separate API for applying class names to their overlays:
**Flow**
```java
Select localeSelector = new Select("Locale", locChangeListener, locales);
localeSelector.setOverlayClassName("locales");
```
**React**
```tsx
```
**Lit**
```html
```
```css
vaadin-select-overlay.locales::part(overlay) {
background: black;
color: white;
}
```
Some components like Grid provide APIs for applying [custom shadow part names](https://vaadin.com/docs/v24/styling/styling-components/parts-and-states.md#shadow-parts) to their internal elements, instead of class names.
The same approach can be used to scope styles to a particular [view or other UI element](https://vaadin.com/docs/v24/styling/styling-other-elements.md).
> **Note: Custom Theme Names Supported, Not Recommended**
>
> In previous versions of Vaadin, a different feature called *theme names* was used to apply identifiers that were also propagated to overlays. This feature is still supported and is used for the built-in style variants in Vaadin components. However, it’s no longer the recommended approach for styling components or their overlays.
## Applying CSS Based on Parent Element
CSS can also be scoped to components based on their parent elements – such as [Horizontal Layout](https://vaadin.com/docs/v24/components/horizontal-layout.md) and [Vertical Layout](https://vaadin.com/docs/v24/components/vertical-layout.md) or [HTML elements](https://vaadin.com/docs/v24/components/html-elements.md) like `div`s – in which they are placed. This is done by applying a CSS class name to the parent element, and prefixing the selector with it:
**Flow**
```java
VerticalLayout filterLayout = new VerticalLayout();
filters.addClassName("filter-layout");
TextField nameFilterField = new TextField();
filterLayout.add(nameFilterField);
```
**React**
```tsx
```
**Lit**
```html
```
```css
.filterLayout vaadin-text-field::part(input-field) {
background: white;
border: 1px solid gray;
}
```
The parent element can be either the component’s nearest parent element or any outer parent element in the element hierarchy. This can be used to apply CSS to components in a specific view in the application, by applying a CSS class name to the view’s root layout element, and scoping component CSS blocks to it.
`a83c6e13-e0fc-4e34-bcad-15dff01f8840`