Question

I use JSF and PrimeFaces and I try to modify render by changing or adding some CSS lines.

I added my CSS file named “styles.css” to my .xhtml page and it’s loaded after those of PrimeFaces so I can override default values.

PrimeFaces create a div in my page :

<div id="j_idt13:universe" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all ui-helper-clearfix" style="width: 86px;">
....
</div>

I’m trying to change 86px size to 100% so in my styles.css I added :

#j_idt13:universe{
    width: 100%;    
}

but it doesn’t work…With Firebug when I inspect source code, my #j_idt13:universe doesn’t appear anywhere…

I can change some CSS by accessing class selector(.class) but not with id selector (#id).

In my case, how can I change 86px to 100% please ?

Thanks

Olivier

Answer 1

The colon : is a special character in CSS selectors representing the start of a pseudo selector. If you want to represent the colon literally as part of the element ID or class name, then you have to escape it using \.

#j_idt13\:universe {

}

Note that this doesn’t work in IE6/7. You’d need to use \3A instead (with a trailing space).

#j_idt13\3A universe {

}

Also note that this will fail when you add another JSF component to the view, because j_idt13 is an autogenerated ID depending on the component’s position in the view, not a fixed ID. Rather give the parent UINamingContainer component a fixed ID, or better, give the target component a style class, so that you can just use the class selector.

See also:

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