How to get GWT CSSResource to parse not() selectors

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?

Dotti

I'd understand some "cool" CSS3 like the transitions, etc. but :not is hardly worth the effort - because the only "elegant" way I see is just hacking the CSS parser to accept CSS3 selectors. – Almonte

The problem is that I'm inheriting someone else's CSS file. I have access to edit it but I'd like to not recreate it all. What's the css2 equivalent of the above statement? I don't think there is an easy one is there? – Dotti

Answer 1

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

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

Thiourea

Thanks for your answer, but I had given up on this long ago so I don't have the code to test it out. – Dotti

Oh well. It's there for posterity :-) – Thiourea

+1 This works. It's worth noting that even more gnarly not() selectors can be escaped using enough backslashes. For example, not([type="search"]) becomes not\(\[type\=\"search\"\]\). – Ronna

One other note: The space before the escaped closing parenthesis is important. .iMore:not\(.__lod\) will currently result in the error "[ERROR] The following unobfuscated classes were present in a strict CssResource: [ERROR] __lod\)" code.google.com/p/google-web-toolkit/issues/detail?id=4422#c14 – Ronna