How to Handle JSF-Generated Colons in CSS Selectors?

JSF Generated HTML Element IDs: Escape Colons in CSS Selectors

When working with JSF (JavaServer Faces), you may encounter HTML element IDs generated with colons (:). This can cause issues when using CSS selectors, where colons indicate the start of pseudo-selectors.

Origin of Colonized IDs:

JSF generates client IDs for HTML elements by default in the form of "FormID:ElementID". This is a convenient way to handle conflicting IDs in a JSF application.

Issue with CSS Selectors:

Unfortunately, colons in CSS selectors represent the start of pseudo-selectors, such as :hover or :first-child. Attempting to use selectors like #FormID:ElementID will result in an error.

Solutions:

1. Escape the Colon with "" or "3A":

#FormID\:ElementID {
  /* CSS styles */
}

#FormIDA ElementID {
  /* CSS styles */
}

2. Use an HTML Wrapper with a Plain ID:

<div>
<pre class="brush:php;toolbar:false">#phoneWrapper table {
  /* CSS styles */
}

3. Change the UINamingContainer Separator:

In JSF 2.x, you can modify the default separator character in the context-param section of web.xml:

<context-param>
  <param-name>javax.faces.SEPARATOR_CHAR</param-name>
  <param-value>-</param-value>
</context-param>

This will change the generated IDs to "FormID-ElementID", making them more compatible with CSS selectors.

4. Disable Prepending of Form ID:

In JSF 1.2 or later, you can disable prepending the form ID by adding prependId="false" to the h:form tag:

<form prependid="false">
  <datatable></datatable>
</form>

However, this approach is not recommended as it can impact AJAX functionality.

5. Use CSS Classes:

<datatable></datatable>

.phone-table {
  /* CSS styles */
}

Recommendation:

For most cases, it is recommended to escape the colon using the "" character. This is a simple and cross-browser compatible solution.