How to use JSF generated HTML element ID in CSS selectors?

The : is a special character in CSS identifiers, it represents a pseudo selector. You would need to escape it.

#phoneForm\:phoneTable {
    background: pink;
}

This only doesn't work in IE6/7. If you'd like to support those users as well, use \3A instead (with a trailing space behind!)

#phoneForm\3A phoneTable {
    background: pink;
}

Above works in all browsers.

There are several other ways to solve this:

1. Use class instead of id. E.g.

   <h:dataTable id="phoneTable" styleClass="pink">
   

   with

   .pink {
       background: pink;
   }
   

   or

   table.pink {
       background: pink;
   }
   

   ---

2. Since JSF 2.x only: change the JSF default UINamingContainer separator by the following context param in web.xml. E.g.

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

   So that the separator character becomes - instead of :. You only need to ensure that you don't use this character yourself anywhere in the ids.

   #phoneForm-phoneTable {
       background: pink;
   }
   

   ---

3. Since JSF 1.2 only: disable prepending of the form id.

   <h:form prependId="false">
       <h:dataTable id="phoneTable">
   

   so that you can use

   #phoneTable {
       background: pink;
   }
   

   You only need to take into account that <f:ajax> won't be able to find it.

See also:

• By default, JSF generates unusable ids, which are incompatible with css part of web standards