What custom CSS selectors are supported in the Autotrack Point & Click Editor?

Autotrack allows the use of custom CSS selectors to have full control over defining elements in your event. Some common uses cases might be if you want to:

  • Select all "buy" buttons on the page, which you might accomplish using the .class selector (for example, .buy-btn).

  • Select all links that point back to your own domain, which you could accomplish with[attribute*=value] (for example, a[href*="yourdomain"] ).

  • Select all links from a specific container, e.g., a navigation bar, which you could accomplish using nested selectors (for example, #navigation-bar > a ).

Selector expressions currently supported by Autotrack

  • .class | For example, .intro selects all elements with class="intro"

  • #id | For example, #firstname selects the element with id="firstname"

  • element | For example, p selects all <p> elements

  • element,element | For example, div,p selects all <div> elements and all <p> elements

  • elementelement | For example, divp selects all <p> elements inside <div> elements

  • element>element | For example, div>p selects all <p> elements where the parent is a <div>element

  • [attribute] | For example, [target] selects all elements with a target attribute

  • [attribute=value] | For example, [target=_blank] selects all elements withtarget="_blank"

  • [attribute~=value] | For example, [title~=flower] selects all elements with a title attribute containing the word "flower"

  • [attribute|=value] | For example, [lang|=en] selects all elements with a lang attribute value starting with "en"

  • [attribute^=value] | For example, a[href^="https"] selects every <a> element whose href attribute value begins with "https"

  • [attribute$=value] | For example, a[href$=".pdf"] selects every <a> element whose href attribute value ends with ".pdf"

  • [attribute*=value] | For example, a[href*="mixpanel"] selects every <a> element whose href attribute value contains the substring "mixpanel"

  • :checked | For example, input:checked selects every checked <input> element

  • :enabled | For example, input:enabled selects every enabled <input> element

  • :not(selector) | For example, :not(p) selects every element that is not a <p> element

  • :nth-of-type(n) | For example, p:nth-of-type(2) selects every <p> element that is the second <p> element of its parent

Find your answer?
0 out of 0 found this helpful



Article is closed for comments.