4

When using the JSF Web application framework, ID of the elements inside a form can be automatically generated by the framework and when a component resides in a form that its ID is form1, the framework automatically generates an ID in the form of form1:foo for that element. While this can be turned off, I was wondering if it's possible to define a CSS ID selector for elements that their ID is in the form of foo:bar.

Thanks in advance.

Behrang
  • 46,888
  • 25
  • 118
  • 160

3 Answers3

5

You can use \ to escape the colon.

#foo\:bar {
    color: red;
}

Works in jQuery selectors as well.

See also:

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • This works in some browsers (tested Chrome, Firefox), but not IE6 or 7 (haven't tested 8). – Ryan Kinal Jun 24 '10 at 17:45
  • Actually, in jQuery/Sizzle (or other `querySelector`-like selector engines) you will need to escape the value again. See http://mothereffingcssescapes.com/#foo%3Abar – Mathias Bynens Jul 06 '11 at 06:36
  • @Mathias: That's just because the backslash is by itself a reserved character in JavaScript. You can also just use `$('[id="foo:bar"]')` instead. – BalusC Jul 06 '11 at 07:33
  • @BalusC: That’s right. Your answer gave the impression that the exact same string could be used in JavaScript, and I just wanted to clarify that’s not really the case. – Mathias Bynens Jul 06 '11 at 07:44
1

According to the W3c spec linked to in this answer, using colons in element IDs is plain wrong if used unescaped.

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

Is the JSF framework really outputting those IDs in the final rendered HTML?

Community
  • 1
  • 1
Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • Very interesting. JSF has always been a mess. No wonder nobody liked it. Even though JSF 2.0 is much much better compared to the previous versions it is disappointing to see that it's plagued with such buggy design and implementation decisions. – Behrang Jun 24 '10 at 15:34
  • JSF 1.0/1.1 was indeed a disaster. JSF 1.2 was a great improvement ahead when Ryan Lubke joined the dev team. JSF 2.0 is only getting better. – BalusC Jun 24 '10 at 15:36
  • @BlausC: Thanks for the clarification. Now everything feels much better :) One question: When prepending of a parent element's `id` to its children is turned of using `prependId="false"`, does the JSF framework ensure that still no two elements on the page get duplicate IDs? – Behrang Jun 24 '10 at 15:37
  • No, JSF will throw `Duplicate Component ID` error then. It has more other causes as well, also see [this answer](http://stackoverflow.com/questions/2101755/im-getting-duplicate-id-error-after-adding-binding-attribute/2101768#2101768). – BalusC Jun 24 '10 at 15:40
0

I did some research about how to escape any character in CSS and wrote about it here: http://mathiasbynens.be/notes/css-escapes Note that there are a lot of peculiarities the spec doesn’t explicitly mention.

I’ve also made a tool that automatically escapes any character sequence for use in CSS and/or JavaScript: http://mothereff.in/css-escapes#0foo%3Abar

Mathias Bynens
  • 144,855
  • 52
  • 216
  • 248