ansaurus

Question

The CSS selector for an element that its id is in the "foo:bar" form

Answer 1

+1 A:

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?

Pekka 2010-06-24 15:27:48

Yes, it does. It's technically mandatory. It is used to separate children of several [`UINamingContainer`](http://java.sun.com/javaee/5/docs/api/javax/faces/component/UINamingContainer.html) components like `h:form`, `h:dataTable`, `f:subview` and so on from each other to avoid duplicate ID's in the generated HTML. As per JSF 2.0 the separator character is however configureable in JSF context settings. The `_` is a better choice. Nevertheless, the colon was indeed a poor initial choice they made a decade back :)

BalusC 2010-06-24 15:30:18

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.

Bytecode Ninja 2010-06-24 15:34:30

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 2010-06-24 15:36:01

@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?

Bytecode Ninja 2010-06-24 15:37:59

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 2010-06-24 15:40:00

To come back on changing the separator character in JSF 2.0, you would only need to ensure that you aren't using the separator character in the *actual* ID's then. If you want to use `_` as separator character, then you should be consistently using `-` or CamelCase in the actual ID's, not `_`. Else it may break.

BalusC 2010-06-24 16:17:06

Answer 2

+1 A:

You can use \ to escape the colon.

#foo\:bar {
    color: red;
}

Works in jQuery selectors as well.

BalusC 2010-06-24 15:29:15

This works in some browsers (tested Chrome, Firefox), but not IE6 or 7 (haven't tested 8).

Ryan Kinal 2010-06-24 17:45:36

ansaurus

tags:

views:

answers:

The CSS selector for an element that its id is in the "foo:bar" form

related questions