Use CSS attribute selectors for the style definition if you want to apply a style
using a DOM ID. Attribute selectors rely on the definition of an attribute, rather than an
HTML tag, to apply a CSS style.
You can set the
id value on any Visualforce component to set its
DOM ID. However, the
id in the rendered HTML is
usually preprended with the
id of parent
components, as part of Visualforce’s automatic ID generation process. For instance, the actual HTML
id of the following code is
j_id0:myId:
<apex:page>
<apex:outputText id="myId" value="This is less fancy."/>
</apex:page>
Your
CSS should take this into consideration by using an attribute
selector:
<apex:page>
<style type="text/css">
[id*=myId] { font-weight: bold; }
</style>
<apex:outputText id="myId" value="This is way fancy !"/>
</apex:page>
This
selector matches any DOM ID that contains “myId” anywhere within the ID, so the
id you set on a Visualforce component should be
unique on the page if you intend to use it for styling purposes.