The selector wizard lets you add one or various empty selectors at one time. This way you can start quickly a new style sheet with the most common selectors. It only applies to style sheets used with HTML documents.
There are different kinds of selectors you can add from this dialog. Those selectors' types can be selected with the buttons at the upper left corner of the dialog. You can only add a type of selectors at a time.
When you select a selector set - a group of selectors in the rightmost list of this dialog - you can choose between create a declaration for each, or use the same declaration for all by checking the radio buttons at the lower right corner of the dialog.
The types of selectors that can be found are:
Single selector - selector button: it adds a single selector. The style will be applied to any tag matching the selector tag.
Child selectors: here you can set the style of any selector with a matching parent. The parent selector will be chosen from the first list, the child selector from the second. For example: p > b - select p in the first list and b in the second - will apply the style to any b tag with a p tag parent.
Class selectors: it sets the style of any selector identified by the class attribute. For example, p.test will match any p tag with class="test" attribute.
<p class="test">this will be shown with the p.test style</p> |
Sibling selectors: with sibling selectors you can apply style to one tag preceded by other tag in the same parent. If you want to apply style - for example - to any p tag preceded by a h1 tag, you must choose in the Sibling pane, h1 in the first list and p in the second list. This will produce the selector h1 + p.
<div><h1>header</h1><p>this will be shown with the h1 + p style</p> |
Contextual selectors: contextual selectors, let you apply a style to any tag with a specific ancestor. For example, selecting p in the first list and b in the second, will apply style to all b tags within a p tag.