Question

I realize that the CSS parser that GWT uses will only handle CSS2, but I am targeting iPhone Safari, so I want to be able to use some of the CSS3 stuff. For properties, I have been fine using the literal function provided by GWT, but I’m having trouble with CSS3 selectors – particularly the not() pseudo-class.

I have a bit of CSS like this:

.iMore:not (.__lod ):active {
    color: #fff
}

When GWT loads this file as a resource, I get:

encountered “(“. Was expecting one of: “{” “,”

the literal function works well for properties, but I tried this:

.iMore:literal("not (.__lod )"):active {
    color: #fff
}

and just got a different error message:

encountered “”not (.__lod ):””. Was expecting one of: <IDENT>

I put literal around the whole block and the error message went away, but I don’t think that will work without @externaling everything referenced in the selectors that use this (there are a lot of others in this file).

1. Would that even work?
2. Is there a more graceful way of doing it?

Answer 1

You escape the parentheses in the selector with backslashes. So for your CSS:

.iMore:not \(.__lod \):active {
    color: #fff
}