Question: Basically I have a component that is a list of rooms that a user has joined. On top of this component there is a search section, and aside of the search input there are some options about the search, like search by "Room Name" , search by "Organization name " etc. I keep this options in objects inside of an array alongside the id of the option. Then I map this array to show all the options.
Now I can display those options but I cant find a way to know which of those options the user has selected. The user has to select only one option and then the option is highlighted

![](https://i.stack.imgur.com/llVYf.png)This is the component

![](https://i.stack.imgur.com/k8KbC.png)This is my code

Answer: 
You need to select only those li that are direct children of ul elements that are direct children of the sidebar menu. You do this using the CSS selector >

```
#main-menu .sidebar-menu > ul > li.orange-text a { color: #ff5923 }

```

You are unlikely to need the !important, though I cannot be absolutely sure as I don't have access to all the styling of your site.
I'm confused. Your image doesn't show everything. But I'll try anyway.
I wouldn't use !important.
li .orange-text means the element where the class orange-text is a child of li. But from what I saw in your picture, it's a class applied to li.
If you want just the first one with the class orange Try:

```
#main-menu .sidebar-menu .orange-text:first-child a{
    color: #ff5923}

```

If you want all the ones with class orange and their decedents try:

```
#main-menu .sidebar-menu .orange-text a{
        color: #ff5923}

```

if you want to color only the a that is a direct child of the .orange-text li but not the grandsons, you may try:

```
#main-menu .sidebar-menu .orange-text>a{
            color: #ff5923}

```

Hope that helped.