Set selection view properties in a Side Navigation item with css

Flow
1

Hi everyone,
I have a question regarding Side Navigation items and how it’s properties can be set with css when one is selected.

I already have in java

navItemFeed.setClassName("left-menu");

and in css

.left-menu{
    background-color:#e9c46a;
    transition-duration: 0.4s;
}
.left-menu:hover{
    color:#73aff5;
    transition-duration: 0.4s;
}

how can I set the selected state properties?

I tried
.left-menu::selection
but no desired outcome
I also tried
.left-menu:focus
but after leaving browser, the formatting was lost.

I guess the keyword is not ‘selection’ or something similar.
Any ideas?

2

Check out the styling section for the component, you can probably find the correct selectors there: Styling | Side Navigation | Components | Vaadin Docs

3

If you mean the currently selected side nav item, you should use [current] attribute. Also, please note that the background color is set on the content part so that requires adding ::part(content):

.left-menu[current]::part(content) {
    background-color: #e9c46a;
}