nXqd nXqd - 4 months ago 50
CSS Question

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

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

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

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


The generated HTML table gets a client ID in form of
phoneForm:phoneTable
. I can't apply CSS for this ID, because the colon indicates the start of a pseudoselector.

How can I use it anyway in CSS selectors?

Answer

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.


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

Comments