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.

How to Create a Selector From the Stylesheet Editor

1. From the Content Explorer, open the stylesheet that you want to modify.
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 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 lets you create a generic class or ID that stands alone and can be applied in the content file to any HTML element. See Generic Classes.
   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. See Classes.
   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. See Advanced Selectors.
   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. See Pseudo Classes.
   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). See Pseudo Class Expressions.
   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. See Pseudo Elements.
   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. See Identifiers.
   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.