Custom Selectors allow you to affect the appearance or behavior of groups of similar elements on a page. This can range from changing font styles in headings to changing the layout for every catalog item returned from a product search. Unfortunately, manually editing each element on a page is both time-consuming and prone to consistency errors. Luckily, JQuery CSS selectors allow you to “select” multiple elements on a page. The Webtrends Optimize visual editor supports the use of custom selectors to highlight and make changes to all elements that match a specified rule.
To use Custom Selectors in the visual editor:
- While creating or editing a test, click Variations > Add Variation to display the variations tools. (The custom selectors bar appears to the right.)
- Enter a valid selector in the Custom Selector bar
- Click to apply the selection. (The visual editor tools menu will appear alongside the first element matching your selector.)
NOTE: Hidden elements. The visual editor will warn you if you use a selector that matches hidden elements, such as ‘html’, ‘head’, ‘body’, ‘title’, ‘script’, ‘meta’ and ‘base’. Selectors it can also contain hidden elements (display:none) that will appear as an empty selection box at the top left of the page; in these cases no warning will be given.
NOTE: Elements in use. When a selector matches an element that is in use by other tests, the visual editor will display a ‘This selector contains an element already in use.’ warning. In this case, the elements in use are not selected and you cannot edit them.
- Style your variation using the visual editor tools to affect changes for all the selected elements.
- Give the variation a name, then click Save.
One of the benefits of CSS selectors is the variety of ways you can use them. The Webtrends Optimize visual editor has been tested against basic and advanced selector methods. The tables below illustrate the currently supported set of selectors available for use.
Commonly used selectors for basic scenarios.
body table tr td
|element parameter||[href] [type]|
|element w/ parameter w/ specific value||a[target!=’_blank’] a[id=’cvLink’]|
DOM Walk Selectors
Hierarchical selectors to identify elements of a type within the DOM .
|Full DOM walk||html body table tr td|
|Partial DOM walk||table tr td|
|Start with a selector, then walk the DOM||[border] tr td|
Selectors to choose elements relative to one another. Examples include items in a list or rows in a table.
ul > li:first-child
Control the logical selection of elements using common operators .
|!= (not equal)||a[target!=’_blank’]|
||= (match value or match value ending with a “-“)||a[id|=’cvLink’]|