Vaadin component CSS for specific class - css

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 >).