How to use custom CSS on different element of same data test id

[xdpooja]

Hi,
I am trying to apply custom css on my dashboard, to apply different instance on different sidebar element like on hover background color I used the st-emotion cache of that particular element but seems like this is dynamic and the name of st- emotion cache will change is there any solution for this

/* Selected element of sidebar */
[class="st-emotion-cache-187vdiz e1nzilvr4"]{
color: #aba9a9;
font-family: 'Montserrat', sans-serif;
padding: 10px 0;
}
/* other element of sidebar */
[class="st-emotion-cache-b8yfos e1nzilvr4"]{
color: #ffffff;
font-family: 'Montserrat', sans-serif;
padding: 10px 0;
}
/* On hover background color */
.st-emotion-cache-1rwt46s.e11k5jya1:hover {
    background: linear-gradient(180deg, rgba(64,41,90,1) 9%, rgba(63,47,99,1) 51%, rgba(60,52,104,1) 100%);
    width: 110%;
}

Please help

[edsaac]

Single elements can be targeted via CSS selectors like nth-of-type or nth-child. For example, to target the list elements that make up the page navigator:

div[data-testid="stSidebarNav"] ul li {
    padding: 10px 0;
}

div[data-testid="stSidebarNav"] ul li:nth-of-type(2n):hover {
    background-color: pink;
}

div[data-testid="stSidebarNav"] ul li:nth-of-type(2n+1):hover {
    background-color: lightsteelblue;
}

[xdpooja]

Thanks a lot!!