Tools - CSS Selector Wizard

This wizard allows you to quickly create a CSS selector.

The tool has a user-friendly interface that guides you by the hand through all the steps of creating a selector - from choosing a tag name, to selecting classes, pseudo-classes and other elements, to presenting and placing the finished selector in the code.

Each step is a separate page. You can navigate through the boards using the Next and Back buttons.

Launching

You can launch the wizard from the CSS Inspector tab using one of the buttons:

• Selector Wizard - Starts the Selector Wizard
• Selector wizard based on the current one - Launches the wizard of a new empty selector, which will contain the properties set in the list

Tag selection

The first page allows you to select the tag for which you want the selector to apply.

Tag category
Select from the list the category (tag language) of tags from which you want to indicate the tag name.

Tag
Select from the list the name of the tag for which it wants to create a selector. Further this tag will be called the current one.

You can edit the categories and tag names using the TDF Tag Definition File Editor.

Of the next three options, only one can be active (they are mutually exclusive):

Must be a descendant of the tag
Check this option if you want to indicate a tag that will have to be overridden by the current tag for the selector to be applied to it.

Must be a successor of the tag
Check this option if you want to indicate a tag that will have to be placed immediately before the current tag (or, in other words, the current tag must follow immediately after this tag).

Must be a child of the tag
Check this option if you want to indicate a tag that will have to be a "parent" of the current tag for the selector to be applied to it.

Must be the first child of its parent
Check this option if the current tag must be the first "child" of its parent for the selector to be applied to it.

Setting classes and text elements

On this page, you can specify whether the selector will refer to elements marked with a class or identifier:

the tag must contain class designations (CLASS attribute)
Check this switch to add to the list the class names that the current tag must have. Classes are defined in the markup using the class="class_name" attribute. You can add and remove class names using the commands next to the class list (below the switch).

the tag must have an identifier (ID attribute)
Select this switch if the current tag must have an ID. Then enter the name of the required identifier in the box below the switch.

You can also narrow the effect of the selector to only the first line, or the first character of the text. To do this, select the selector (you can select at most one of them):

• selector refers to the first line of text (:first_line)
• selector refers to the first letter of text (:first_letter)

Selection of specific element states

The options of this page allow you to select specific states of the interface element for which the selector is to apply:

mouse cursor must be over the element (:hover)
Check this switch if you want the selector to apply only when the mouse cursor is over the element. This is most commonly used to change the color of the link text.

element must be active (:active)
Check this switch if you want the selector to apply only when the mouse button has been pressed over the element and not yet released. In this state, the element is "active".

element must have focus (:focus)
Check this switch if the element created by the current tag must have focus, that is, it must be currently selected. This is applicable, for example, for form fields, where you can highlight the text field in which the cursor is located with a different color to make it stand out from other form elements.

If the tag to which the selector applies describes a link in the document, you can also specify the properties of the link:

• default - a simple link, without a specific state
• link not visited - a link that you have not yet visited (there is no entry in the browser history about visiting this address)
• visited link - a link that you have visited before (that is, the browser remembers the use of this address)

Define the language, attributes and position of the text in the markup

In this page you can set the following selector options:

The tag must be in the language
Check this option to select from the list the language in which the text contained in the markup is written. This language must be selected as the tag argument, e.g. lang="en".

The tag must contain attributes
Check this option if the current tag must have attributes. You can add attributes to the list and remove them from the list using the commands on the right side of the list. Clicking on the commands to add an attribute will launch the Attribute Selector tool, which will make it easier for you to provide the required attribute names and values and format the code for the selector accordingly.

You can also specify whether the selector should refer to text contained from the tag, or to text added before or after the tag:

• to the text in the tag
• to text added before the tag (:before)
• to text added after the tag (:after)

Preview, approve selector, insert into document

The last page provides a preview of the result of the wizard. If the selector looks exactly as you want it to, click END.

If the document into which you are inserting the selector does not have a HEAD section and a STYLE tag, they will be added when you insert the selector.