Creating Selectors

A selector is a way to associate XHTML 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. 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

1. Open the stylesheet you want to modify or create a new one.
2. In the local toolbar, click . The New Selector dialog opens.

3. 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.

   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. 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 lets you create a generic class or ID that stands alone and can be applied in the content file to any HTML element.
   Class Name	You can create a simple class (e.g., a special paragraph intended to serve as a note or tip). In the New Selector dialog, enter a name for the class.
   Advanced Selector	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.
   Pseudo Class	If you want to add a pseudo class to your selector, choose it from this field. In CSS, pseudo classes are a special group of style classes 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.
   Pseudo Class Expression	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).
   Pseudo Element	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.
   Identifier (ID)	In CSS, an identifier (ID) is similar to a class, 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).

4. Click OK. The new selector is added to the stylesheet.
5. Click to save your work.

How to Create a New Selector From a Content File

1. Open the document or topic.

2. Do one of the following, depending on whether you want to use the Styles window pane or structure bars:

   Styles Window Pane

   1. Place your cursor on the content that you want to use as a foundation for your new style.

      Example 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.

   2. Select Home > Style Window. The Styles window pane opens on the right side of the interface.
   3. In the Styles window pane, click Create Style. The Create Style dialog opens.

   Structure Bars

   1. If the tag block bars are not shown to the left of the content, click at the bottom of the editor.

   2. 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.

   3. In the context menu, select Style Class > Create Style Class or Style ID>Create Style ID. The Create Style dialog opens.
3. 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 In CSS, an identifier (ID) is similar to a class, 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.
4. In the field after your selection, type a name for the new style class or ID, without using spaces.
5. Select the appropriate stylesheet(s) on the right side of the dialog (if the topic is associated with more than one stylesheet).
6. 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.
7. 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.
8. Click OK.
9. Click to save your work.

What’s Noteworthy?