8

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?
jhericks
  • 5,833
  • 6
  • 40
  • 60
  • 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. – Igor Klimer Aug 14 '10 at 11:26
  • 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? – jhericks Aug 15 '10 at 02:31

1 Answers1

10

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

.iMore:not \(.__lod \):active {
    color: #fff
}
Roy Paterson
  • 863
  • 9
  • 17
  • 1
    Thanks for your answer, but I had given up on this long ago so I don't have the code to test it out. – jhericks Oct 04 '11 at 21:46
  • Oh well. It's there for posterity :-) – Roy Paterson Oct 06 '11 at 10:15
  • 2
    +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\"\]\)`. – Daniel Trebbien Sep 14 '12 at 22:27
  • 4
    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\\)" http://code.google.com/p/google-web-toolkit/issues/detail?id=4422#c14 – Daniel Trebbien Oct 08 '12 at 23:04