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. For more information about the different kinds of selectors, see Selectors.

You can create selectors from the Stylesheet Editor or from a content file (i.e., topic, snippet, template 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 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.

    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 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 Save the active file. to save your work.

How to Create a Style Class From a Content File

  1. Open the content file.
  2. Do one of the following, depending on whether you want to use the Styles window pane, structure bars, or the Style Inspector.

    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.

    Style Inspector

    1. Place your cursor on the content that you want to use as a foundation for your new style.
    2. Select Home > Formatting Window. The Formatting window pane opens on the right side of the interface.
    3. In the Style Inspector tab, click . 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). See Classes.
    • 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. See Identifiers.
  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 Save the active file. to save your work.

What’s Noteworthy?

Note You can also import existing styles from another stylesheet. See Importing Styles.

Note You also might want to add comments to styles that you create. This helps you keep track of the specific purpose of each style. See Adding Comments to Styles.

What’s Next?

After you create a new selector, you can edit its properties (e.g., font, background, border). See Editing Styles in a Regular Stylesheet.