Is it possible to change the element id separator in JSF?

Question

For example, the following snippet:

Answer 1

This is not possible in JSF 1.x, but since JSF 2.x you can define it in web.xml as init-param of javax.faces.SEPARATOR_CHAR.

That said, I guess that you just wanted to change it because you'd like to get your CSS to work, is it? The colon : is namely a special character in CSS identifiers, it represents a pseudo selector. If this reason is true for you, then it might be good to know that you can escape special characters in CSS the usual way by \.

Thus, e.g.

#levelone\:leveltwo {
    color: blue;
}

ought to work for normal browsers (for IE6/7 you need #levelone\3A leveltwo instead).

The same applies when you intend to use it with jQuery or any other JavaScript framework which selects elements with help of CSS selectors:

var leveltwo = $('#levelone\\:leveltwo');

Alternatively, you can also just give it a styleClass which you in turn can correlate with a CSS class. Thus, e.g.

which generates

can be styled with

.myinput {
    color: blue;
}

See also

• How to select JSF components using jQuery?
• How to use JSF generated HTML element ID with colon ":" in CSS selectors?