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:

1swfobject.registerObject("clippy.codeblock-1", "9");<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’s Guide

No Results

Defining Styles for a Component’s DOM ID