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.
how to create a new Selector from the stylesheet editor
- Open the stylesheet you want to modify.
- 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
Description
HTML Element
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.
Identifiers (IDs) are similar to classes, except that IDs are unique. An element in your stylesheet can have only one ID on it, whereas it can have multiple classes. And each page of your output can have only one element with a particular ID. For many authors, using an ID may not be important, but for others—such as those making use of Javascript—IDs can be very useful.
If you want to create an ID, enter a name for it in this field.
Comments
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.
how to create a new style class from a Content File
- Open the content file (e.g., topic, snippet).
-
If the tag block bars are not shown to the left of the content, click
at the bottom of the editor. -
Right-click the appropriate structure bar next to the content that you want to use as a foundation for your new style.
example
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).
- ID Identifiers (IDs) are similar to classes, except that IDs are unique. An element in your stylesheet can have only one ID on it, whereas it can have multiple classes. And each page of your output can have only one element with a particular ID. For many authors, using an ID may not be important, but for others—such as those making use of Javascript—IDs can be very useful.
- 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.