Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

Defining Styles for a Component’s DOM ID

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:

1<apex:page>
2    <apex:outputText id="myId" value="This is less fancy."/>
3</apex:page>

Your CSS should take this into consideration by using an attribute selector:

1<apex:page>
2    <style type="text/css">
3        [id*=myId] { font-weight: bold; }
4    </style>
5    <apex:outputText id="myId" value="This is way fancy !"/>
6</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.

Visualforce Developer Guide

Defining Styles for a Component’s DOM ID

See Also