Since JSF's NamingContainer's cause rendered ids like "foo:bar", here is described howto work around for CSS.

You just need to use a backslash to escape the colon 

 <style>
   div#foo { background-color:red}
   div#foo\:bar { background-color:green}
 </style>

Rendered markup by a component 

 <div id="foo">Foo</div>
 <div id="foo:bar">Foo:Bar</div>

Note that only works for Firefox and Safari.

BTW. the standard naming container components are:

css_component_ids (last edited 2009-09-20 23:01:15 by localhost)