Selecting Elements with Custom Selectors

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:

  1. While creating or editing a test, click Variations > Add Variation to display the variations tools. (The custom selectors bar appears to the right.)
  2. Enter a valid selector in the Custom Selector bar
  3. 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.

  4. Style your variation using the visual editor tools to affect changes for all the selected elements.
  5. Give the variation a name, then click Save.

Supported Selectors

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.

Basic Selectors

Commonly used selectors for basic scenarios.

Selector Example
element td
body table tr td
id #cvLink
a[id=’cvLink’]
name input[name=’formInput’]
class .className
th[class=’className’]
element parameter [href] [type]
multiselect .className1,.className2
h1,.className
#cvLink,td[class=’className’] *
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 .

Selector Example
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

Relative Selectors

Selectors to choose elements relative to one another. Examples include items in a list or rows in a table.

Selector Example
First/Last li:first
li:las
Even/Odd tr:even
td:odd
Children ul:first-child
ul > li:first-child

Operators

Control the logical selection of elements using common operators .

Operator Example
= (equal) a[id=’cvLink’]
!= (not equal) a[target!=’_blank’]
|= (match value or match value ending with a “-“) a[id|=’cvLink’]