How to Use Jsf Generated HTML Element Id With Colon ":" in CSS Selectors

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

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">


     #phoneField table {
    background: pink;

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

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


     .pink {
    background: pink;

    or {
    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.


    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

Handling a colon in an element ID in a CSS selector


input#search_form\:expression {  ///...}
  • See also Using Namespaces with CSS (MSDN)

The CSS selector for an element that its id is in the foo:bar form

According to the W3c spec linked to in this answer, using colons in element IDs is plain wrong if used unescaped.

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

Is the JSF framework really outputting those IDs in the final rendered HTML?

What does a colon mean within an HTML id attribute?

Colons are allowed inside ID attributes, but hold no special significance. It's not really advisable to use them because they can sometimes cause problems, such as when used with jQuery or CSS, where the colon has special meaning as a pseudo-selector.

Colon (:) in id name when using jsplumb

try to escape the : with \\ (if that wont work try single \)

jjsPlumb.connect({source:"j_idt20\\:0", target:"j_idt20\\:1"});


change the JSF default UINamingContainer separator by the following
context param in web.xml. E.g.


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

Why do colons in linearGradient IDs break them when the SVG is used in an img tag?

Actually ID's containing ':'(colon) shouldn't work in a self contained file either.
It's a matter of XML naming compliance.

An excerpt from the MDN Docs

It must be valid in XML documents. A stand-alone SVG document uses XML 1.0 syntax, which specifies that valid IDs only include designated characters (letters, digits, and a few punctuation marks), and do not start with a digit, a full stop (.) character, or a hyphen-minus (-) character.

As a rule of thumb:

apply the same naming rules, you would also need for html/css/js selectors:

  1. keep it ansi: avoid non-english characters like diacritics/accents etc.
  2. don't start selector names with any numbers – appending them like 'element-01' is perfectly OK
  3. avoid characters, which are also used as operators: like the colon for pseudo-elements, plus or tilde for adjacent siblings etc.


#\31 234myGradient{

<li id="myGradient-1234">Selectable!</li>
<li id="myGradient:1234">Not selectable: selector contains <strong>colon operator reserved for pseudo elements</strong>. You might however escape the colon by a backslash</li>
<li id="1234myGradient">Not Selectable: selector starts with <strong>numbers</strong></li>

Is it possible to use JSF to build clean CSS layouts without using tables?

the liberal use of html tables for layout by many components

Many components? There are as far as I know only two which do that "unnecessarily": the <h:selectOneRadio> and <h:selectManyCheckbox>. If you want a table-less group of radiobuttons and checkboxes wherein you have the full control over the generated markup, just use the Tomahawk variant instead, which has an extra layout attribute value of spread. Here's an example of the <t:selectOneRadio> approach:

<t:selectOneRadio id="foo" value="#{}" layout="spread">
<f:selectItems value="#{bean.foos}" />
<t:radio for="foo" index="0" />
<t:radio for="foo" index="1" />
<t:radio for="foo" index="2" />

Since JSF 2.2 it's even possible to do it "out the box" with new passthrough elements/attributes feature. Since JSF 2.3 it has even become part of standard component set. See also a.o. <h:selectOneRadio> renders table element, how to avoid this?

For the remainder, you just have the control of the general HTML output fully in your own hands. Just do not use tables for layout at all. I.e. do not use HTML <table> or JSF <h:panelGrid> for layout. Just use HTML <div> elements to display content blocks. Or if you're a JSF-purist, you can use <h:panelGroup layout="block"> to let JSF generate a HTML <div> element.

As to applying CSS, it isn't that hard, every JSF HTML component has a styleClass attribute wherein you can specify CSS classes (which would end up in a HTML class attribute) and style attribute wherein you can specify inline CSS (which would end up in a HTML style attribute).

You can even define global CSS styles and use the ID selectors. Only thing which you need to take care in JSF+CSS is that the JSF-generated HTML element IDs are prepended with the IDs of all parent NamingContainer components (e.g. <h:form>, <h:dataTable>, etc) with a colon : as separator. As the colon is an illegal character in CSS identifiers, you need to escape it using \. So styling the input element of for example

<h:form id="form">
<h:inputText id="input" ... />

which generates <input type="text" id="form:input" ... /> should be done as

#form\:input {
background: gray;

It's however very rare to select form input elements or table elements by ID. More commonly the classname is to be used (which is more semantic and better reuseable) and this doesn't need to be escaped. The ID are usually used by main layout components only anyway (header, menu, content, footer, title, etc) and they usually don't end up in a JSF NamingContainer.

See also:

  • How to use JSF generated HTML element ID with colon ":" in CSS selectors?
  • By default, JSF generates unusable ids, which are incompatible with css part of web standards
  • What is the need of JSF, when UI can be achieved from CSS, HTML, JavaScript, jQuery?
  • JavaServer Faces 2.2 and HTML5 support, why is XHTML still being used

I seem to be labouring under a misaprehension here, but every JSF tutorial I've seen ends up producing table-based HTML layouts. I've also looked at RichFaces and IceFaces demos and there's an awful lot of tables-for-layout there as well.

Start here: Java EE web development, where do I start and what skills do I need?

By default, JSF generates unusable IDs, which are incompatible with the CSS part of web standards

The : is been chosen because that's the only sensible separator character for which can be guaranteed that the enduser won't accidently use it in JSF component IDs (which is been validated) and that it's possible to use it in CSS selectors by escaping it with \.

Note that the HTML4 spec says that the colon is a valid value in id and name attribute. So your complaint that it isn't compatible with "web standards" goes nowhere.

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The only problem is thus that the : is a special character in CSS selectors which needs to be escaped. JS has at its own no problems with colons. The document.getElementById("foo:bar") works perfectly fine. The only possible problem is in jQuery because it uses CSS selector syntax.

If you really need to, then you can always change the default separator character : by setting the javax.faces.SEPARATOR_CHAR context param to e.g. - or _ as below. You only need to guarantee that you don't use that character anywhere in JSF component IDs yourself (it's not been validated!).


The _ has by the way the additional disadvantage that it occurs in JSF autogenerated IDs like j_id1, thus you should also ensure that all NamingContainer components throughout your JSF pages have a fixed ID instead of an autogenerated one. Otherwise JSF will have problems finding naming container children.

I would only not recommend it. It's in long term confusing and brittle. To think about it again, unique elements in the average JSF webapp are by itself usually already not inside forms or tables. They generally just represent the main layout aspects. I'd say, it's otherwise a bad design in general HTML/CSS perspective. Just select them by reusable CSS class names instead of IDs. If you really need to, you can always wrap it in a plain HTML <div> or <span> whose ID won't be prepended by JSF.

See also:

  • What are valid values for the id attribute in HTML?
  • Is it possible to change the element id separator in JSF?
  • How to select JSF components using jQuery?
  • How to use JSF generated HTML element ID with colon ":" in CSS selectors?
  • Integrate JavaScript in JSF composite component, the clean way

Related Topics

Leave a reply