Vaadin component CSS for specific class

Question

I am trying to remove grid cell focus styling from each Grid instance that uses a specific CSS class.

The CSS

.v-grid-cell-focused:before {
    display: none !important;
}

works great but applies the styling across all Grid instances in my application.

I have tried making it apply specifically to a CSS class by:

.mygrid.v-grid-cell-focused:before {
    display: none !important;
}

or

.v-grid-cell-focused.mygrid:before {
    display: none !important;
}

or

.mygrid > .v-grid-cell-focused:before {
    display: none !important;
}

but result in no changes from the default behaviour.

I have successfully used the following CSS

.v-grid-cell.anotherGrid {
    background-color: #07a9ca;
    color: #000;
}

where the only Grids that adopted the the above styling was the ones that I assigned to the style name anotherGrid to. This suggests to me that there might be a complexity regarding CSS selectors, in my case :before, coupled with custom CSS classes that is causing my implementation not to work.

How do I reference Vaadin component CSS and apply it only to specific CSS classes that I specify?

Answer 1

I had the same requirement and for me, the following style worked:

.mygrid .v-grid-cell-focused:before {
    display: none !important;
}

Notice the space between .mygrid and .v-grid-cell-focused:before which means to select not only the direct children (as you did with >).