---
schema_version: "1"
id: 0a8f0df28245d2d5f14dcac08f95a32154faf0f41c5ce34ee41b2761763a2a84
title: Defining Styles for a Component’s DOM ID
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/salesforce-pages-developers-guide/guides/pages/styling/pages-styling-custom-using-component-id.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-styling-custom-using-component-id.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: eeb6edcf8f46474e4994a2bb183b9f4b82d74c116a645489ec863d56663aac9b
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

# 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`:

<!-- otherprops: apex_page -->
```markup
<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:

<!-- otherprops: apex_page set_clipboard -->
```markup
<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.

**See Also**  


-   [Using $Component to Reference Components from JavaScript](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/javascript/pages-access.md)
-   [Best Practices for Accessing Component IDs](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/best-practices/pages-best-practices-accessing-id.md)
-   [$Component](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/variables/pages-variables-global-component.md)