Help with CSS selector

Hi,
I’m trying to style vaadin-select-value-button > vaadin-select-item::part(content) from (https://vaadin.com/docs/latest/components/select/styling).
Am I supposed to create this file: /frontend/themes/[name]/components/vaadin-select-value-button.css

Then, how do I use that selector? (css noobie)

No you should use it in any css file except this one.

These files (in component with the name of the component) were done to change the css in the shadow (:host selector for example).

Here you are just using normal css (the name of the tag and the new selector ::part)

Trying to understand :smile: If I use for example /frontend/themes/[name]/components/vaadin-select-item.css
Should I be able to just do like this?

    color: red !important;
}```

In the shadow dom, you can use a different syntax: Styling Components | Custom Themes | Styling | Vaadin 23 Docs
And you probably can’t do this ::part(content) .apply-red-color
Don’t use the shadow dom, it’s more complicated and relies on the internal structure of the component which can change.

You can probably read a lot of shadow dom styling in the previous documentation (Vaadin 23), but the documentation has been updated to use the newer version, more stable since it’s web standard

(Shadow DOM styling is no longer recommended in V24 btw, so unless your app is already fully based on shadow DOM styling, I’d recommend not doing it that way)