How to apply a style to a grid cell only if it's NOT selected

I have the following grid:

grid.addColumn(...).setStyleGenerator(item -> "myCssDefinition"); were myCssDefinition is:

.v-grid-cell.myCssDefinition { color: red; } This works great except it makes the text almost impossible to read when the row is selected.

How can I only change the style, or maybe it’s how do I edit the style itself, so that the font color is ONLY red when the row is NOT selected, and when it’s selected I just want to use the default Vaadin theme style.

This goes to domai nof css magic. I would first try the :not(…) operator of css. I.e. I would use :not(selection-class-name) in .myCssDefinition, to exclude your style to appear when selection-class-name is there. You need to double check with Chrome inspector what was the class name of the selection in Grid.

Hi Stephan,

You can also apply the style only when the row is not selected with the following example: column.setStyleGenerator(item -> grid.getSelectionModel().isSelected(item) ? null : "myCssDefinition") Hope this helps