Problem with background color implementation for a specific list view

Hi I want to make the background-color of a specific list view gray. What I did was; 1 - adding a class to the list view "grijs" 2 - adding in the custom.css this .grijs > li { background-color: #f5f5f5 !important; } .grijs > li:hover { background-color: #f5f5f5 !important; } 3 - adding in the custom .scss also the same; .grijs > li { background-color: #f5f5f5 !important; } .grijs > li:hover { background-color: #f5f5f5 !important; } The result; list view keeps having the original color. I see that my new class is not even read (yes I did a cache delete); mx-listview .mx-listview-item { background-color: #fff; } This is what I see...who can tell me which mistake I make?
2 answers

The problem is with the '>' element selector. The class .grijs is not placed on the ul but on a surrounding div. The li is not a direct child of .grijs.

You can remove the '>' or change it to:

.grijs > ul > li { background-color: #f5f5f5 !important; }    
.grijs > ul > li:hover { background-color: #f5f5f5 !important; }

Rapido, if you want to add custom css you only have to do this to the proper component in the custom folder. Make sure you check which that is by using the chrome developer inpect element option. Then click on the css selector that makes the background -color white. You should be able to find the same scss file in the custom folder structure and a predefined selector that you can extend. Compile your sass files to CSS and that should do the trick. For some additional background information see: Create a custom theme with the Mendix UI Framework