How to use JSF generated HTML element ID with colon ":" in CSS selectors?

Question

I've been working with a simple Java EE project using JSF.

<h:form id="phoneForm">
    <h:dataTable id="phoneTable">

    </h:dataTable>
</h:form>

I tried to set CSS via #phoneTable { ... }, however it doesn't work. Upon inspection of the HTML source in client side, it appears that the JSF-generated HTML table gets a client ID in form of id="phoneForm:phoneTable". I can't apply CSS via #phoneForm:phoneTable { ... }, because the colon indicates the start of a pseudoselector and causes an error.

How can I use it anyway in CSS selectors?

Isar

Why don't you add a styleClass attribute to your dataTable? - See also: stackoverflow.com/questions/3111388/… – Holna

I've just add the colon: phoneForm\:phoneTable and it works. Thanks for the link :) – Isar

Answer 1

The : is a special character in CSS identifiers, it represents the start of a pseudo class selector like :hover, :first-child, etc. 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. Just wrap it in a plain HTML element and style via it instead.

    <h:form id="phoneForm">
        <div id="phoneField">
            <h:dataTable id="phoneTable">
   

   with

    #phoneField table {
        background: pink;
    }
   

   ---

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

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

   with

    .pink {
        background: pink;
    }
   

   or

    table.pink {
        background: pink;
    }
   

   Additional advantage is that this allows much more abstraction freedom. The CSS is reusable on multiple elements without the need to add selectors and/or copypaste properties when you want to reuse the same properties on another element(s).

   ---

3. 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 :.

    #phoneForm-phoneTable {
        background: pink;
    }
   

   Disadvantage is that you need to ensure that you don't use this character yourself anywhere in the ids and this is thus a very brittle approach. I do not recommend this approach. This is a bad practice.

   ---

4. 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;
    }
   

   Disadvantage is that <f:ajax> won't be able to find it and that it is considered poor practice: UIForm with prependId="false" breaks <f:ajax render>. I do not recommend this approach. This is a bad practice. Moreover, this attribute does not exist in all other UINamingContainer components, so you still have to deal with them the right way (#1 and/or #2 here above).

   ---

In your specific case, I think turning it into a CSS class as described in #2 is the most appropriate solution. A "phone table" namely doesn't seem to represent a website-wide unique element. Real website-wide unique elements such as header, menu, content, footer, etc are usually not wrapped in JSF forms or other JSF naming containers, so their IDs wouldn't be prefixed anyway.

See also:

• How to select JSF components using jQuery?
• By default, JSF generates unusable IDs, which are incompatible with the CSS part of web standards

Polyvinyl

Thank you! Especially for 2. and 3. part of your answer since for me escaping did not work and using a class is less efficiant in rendering. – Alduino

Thank you! It was useful for a command button inside a form. The command button render a span tag. I set the css style like: #form-id span – Efrem

Answer 2

<h:form prependId="false">

Does not work if you are using a

<h:commandButton>
tag

Bertrand