Distinctive row selection in a List view

Hi Experts,   I am currently facing an issue to implement a color for a border when I make a selection in the list view. I have however implemented the below code in the _custom.scss file and also can see the changes being updated in the Calypso console.   .mx-listview tr.selected{     background-color: "#FFFFFF" ; // set it to the color of your choice     border: 5px solid #EFF23A; }   However, after I locally deploy the project, I see no changes.   Is the custom class defined right for the listview?   Kindly assist.   Regards Anirudh
2 answers


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 


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.


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/