With Usetiful you can target your elements conveniently, using the Element selector inside of the Usetiful browser plugin. However, sometimes it is necessary to find more advanced ways to connect to your front-end elements.
Usetiful is an open platform and supports queries using attribute selectors. Simply write your query inside of the Element field in Usetiful tour builder:
Please note: Usetiful targets the first element found on your page that fits the query.
Examples of queries:
| [data-value] | Element with such attribute exists |
| [data-value="value"] | Attribute has an exact value |
| [data-value*="value"] | Attribute contains the value |
| [data-value~="value"] | Attribute contains this value as part of a space-separated list of values |
| [data-value|="value"] | Attribute contains this value as part of a dash-separated list of values |
| [data-value^="value"] | Attribue value starts with this |
| [data-value$="value"] | Attribute value ends with this |
In general, Usetiful supports all CSS selectors supported by the end user's browser. You can find more information here.