Using nth-child CSS selector with UiBinder in GWT

Question

In my web app, I want to have a table where every other row is colored with a different background. I am using GWT and so in my UiBinder file I have some style information like this:

<ui:style> 
  .productlist { 
    cursor: pointer; 
    width: 50em; 
    padding: 10px 10px 0px 10px; 
  }

  .productlist tr:nth-child(even) { 
    background-color: silver; 
  }
</ui:style>

I believe this is the correct CSS as it works in the browser. However, when running the app in dev mode, I get a crash saying the CSS cannot be interpreted. If I replace "even" with "5", I get an error saying the Uibinder expected <IDENT>.

Has anyone used the nth-child CSS selector with GWT before?

Answer 1

This is a known issue.

You can work around this problem by escaping the parenthesis to avoid confusing the poor GWT CSS parser:

.productlist tr:nth-child\(even\) { 
    background-color: silver; 
}