Using the prefix option¶

The Prefix option in the Selector menu allows you to add a prefix to a style. This can be any valid CSS selector. For example, you could add a Prefix class to your Heading 1 style called .blue and add a Font color property of Blue to it.  Then, on a parent container add the class .blue. This would target all Heading 1 elements within the container and make them blue.

There are many uses for adding a Prefix to a style. This is advanced functionality for developers.

To add a prefix:

1. Navigate to the Style builder. This is available when you edit Base styles or Custom styles. 
2. Within the Style editor, click on the Style tree button. This will say Default on it
3. Within the Selector menu, click on the + icon
4. Click on Prefix
5. The Prefix menu will open
6. Within the Prefix field, enter your Prefix. This must be a valid CSS selector like .class, #id or element
7. Click Add
8. The Prefix menu and Selector menu will close and the Prefix will be added to your Style tree
9. Click on the Prefix in your Style tree to return to the form and add CSS properties to it.

Targeting IE browsers with a prefix¶

Site Studio includes a number conditional statements for Internet Explorer that allow you to provide different styles for these browsers. To target a specific version of Internet Explorer you can add a Prefix class to your style. These are:

• .coh-ie9 
• .coh-ie10
• .coh-ie11

To add a prefix:

1. Navigate to the Style builder. This is available when you edit Base styles or Custom styles. 
2. Within the Style editor, click on the Style tree button. This will say Default on it
3. Within the Selector menu, click on the + icon
4. Click on Prefix
5. The Prefix menu will open
6. Click on IE 9 to target IE9 or within the Prefix field, enter .coh-ie10 or .coh-ie11
7. Click Add
8. The Prefix menu and Selector menu will close and the Internet Explorer browser prefix will be added to your Style tree
9. Click on the Prefix in your Style tree to return to the form and add CSS properties to it.