Hi,
Please see the HTML structure in browser console. I think in List View you will find <li> tags with selected attribute. So CSS selector for this could be something like
.mx-listview>ul>li.selected
The <tr> and <td> tags are found in data grid’s HTML.
I have checked on my project, list view selection color worked with the above selector of li.selected.
Update:
Right click in browser window and then click inspect element or just press CTRL+SHIFT+I. It will open the console. Go to elements tab, there is the HTML structure of your page.
Now navigate through HTML to find your List View, or press CTRL+SHIFT+C and then click on List View, it will show its HTML.
There you can see the HTML and CSS applied on it.
After writing CSS with appropriate CSS selector, if it still doesn't work, then try !important as mentioned in below answer. However it worked without !important for me using the complete selector as mentioned above. Do search CSS Specificity if you want to learn the purpose of !important
Hope it helps.
Hi Anirudh,
Sometimes, when working with styles, the styling behavior is affected based on the order of loading styles.
- Check if you have applied the styles on the lower order of DOM
- Make sure you also add !important to your styles, to ensure, you override all the other styles being applied.
Refer https://www.geeksforgeeks.org/how-to-apply-important-in-css/