A selector is a way to associate HTML content with style settings based on various information—most often its type, class, or ID. Sometimes the word "selector" is used interchangeably with the term "style," but a selector can be much more than just a simple style.
When you create a new stylesheet, it already has many selectors in it. If necessary, you can create new selectors of varying levels of complexity.
You can create selectors from the Stylesheet Editor or from a content file (i.e., topic, snippet, master page). If you use the Stylesheet Editor, you can create more kinds of selectors. If you use the content file, the process can sometimes be faster.
Open the stylesheet you want to modify or create a new one.
- In the local toolbar, click . The New Selector dialog opens.
Complete any of the fields in the dialog. The two most common fields are the HTML Element and Class Name, but you can click Advanced Options for more fields.Field Descriptions
In CSS there are primary styles that correspond to the different HTML elements (e.g., h1, h2, p, img). You can think of these as parent styles, because in a way, they can have children. A class is the most common type of child for a style. Some classes might already be included in your stylesheet when you first create a project.
In this field, you can select an HTML element (or "parent" style) if you want your new class or other "child" (e.g., ID) to be directly associated with it.
Alternatively, you can clear this field or select (generic). This allows you to create a generic class or ID that stands alone and can be applied in the content file to any HTML element.
If you want to create a simple class (e.g., a special paragraph intended to serve as a tip), enter a name for it.
As you complete the different fields in this dialog, the Advanced Selector field is populated accordingly. The reverse is also true. You can enter text in the Advanced Selector field directly, and the other fields in the dialog will be automatically populated. However, you need to enter the correct syntax if you type directly in the field.
If you want to add a pseudo class to your selector, choose it from this field.
Pseudo classes are a special group of style classes in CSS that pertain to elements when they're in a certain state (e.g., the font turns orange when a user hovers over it). They are often (but not exclusively) used for styles associated with hyperlinks.
For a handful of pseudo classes, you can also add an expression. If you select one of the valid pseudo classes (e.g., nth-child, not), you can then enter something in the Pseudo Class Expression field (e.g., 3, 5n+5, odd, even).
In addition to pseudo classes, you can add pseudo elements to a style. Whereas a pseudo class focuses on the state of an element (e.g., change font color when hovered), a pseudo element focuses on a specific part of an element.
If you want to create an ID, enter a name for it in this field.
You can add comments to your selector as a way to remind you or others about information related to the style (e.g., which situations are appropriate to use a certain style).
- Click OK. The new selector is added to the stylesheet.
- Click to save your work.
- Open the
document or topic.
Do one of the following, depending on whether you want to use the Styles window pane or structure bars:Styles Window Pane
Place your cursor on the content that you want to use as a foundation for your new style.
If you place your cursor on content that currently has the p style applied to it, the new style will start out with the same property values as the p style.
- Select the Home ribbon.In the Styles section select Style Window. The Styles window pane opens on the right side of the interface.
- In the Styles window pane, click Create Style. The Create Style dialog opens.
- If the structure bars are not already shown, click at the bottom of the editor to display them to the left of the content.
See About Structure Bars.
Right-click the appropriate structure bar next to the content that you want to use as a foundation for your new style.
If you right-click the li tag bar next to a list in the topic, the new style will start out with the same property values as the li style.
- In the context menu, select Style Class>Create Style Class or Style ID>Create Style ID. The Create Style dialog opens.
- On the left side of the dialog, select one of the following:
- Class Select this if you want to create a simple class (e.g., a special paragraph intended to serve as a tip or note).
- In the field after your selection, type a name for the new style class or ID, without using spaces.
- Select the appropriate stylesheet(s) on the right side of the dialog (if the topic is associated with more than one stylesheet).
- The property values already applied to the selected content are shown. If you do not want to include certain property values in the new selector, click the check box next to the value (in the Include column) to remove the check mark.
- If you want the new style to immediately be applied to the content selected in the topic, select Create style and update the source element. If you do not want the new style to immediately be applied to the content selected in the topic, select Create style without updating the source element.
- Click OK.
- Click to save your work.