VerticalLayout styling row-wrapping divs


I would like to create the alternating-row-color effect in a verticallayout, but have trouble attaching a style name to the wrapping div.

Take a simple example (like the verticallayout demo in the vaadin sampler),

VerticalLayout foo = new VerticalLayout();
TextField bar = new TextField("Enter your text here:");

this creates the v-verticallayout div and the actual element div, both which I can name, but in between an anonymous div tag with an in-line style definition (see picture). I would like to attach a stylename to it which allows me to color the background of the entire full-width row.

I have tried reading it back from the component and then styling it and a few CSS tricks, but that didn’t work. Wrapping the item and styling the wrapper does work, but seem not elegant. Is there a better way to get to that anonymous div tag (and giving different styles to each alternating anonymous div tag)?

Thank you for any suggestions,


Simple CSS should do the trick, in browsers that support these advanced selectors:

.v-verticallayout > div > div::nth-child(odd) {
   background: #ccc;