Home/ Documentation/ Pinegrow Interactions/ Selecting target elements

Selecting target elements

Use the Element selector control to select one or more elements on the page.

The selector control is used to select target elements in Interactions action, Scroll scene action, Timeline editor and Apply to many action.

Getting familiar with how elements can be targeted will let you create efficient and reusable interactions.

One or more elements on the page can be selected with the selector control.

The element selector works in three modes:

  • Selecting a descendant of the current element
  • Selecting any element on the page
  • Using custom selector

The control generates a selector that targets the selected elements. The selector is similar to a CSS selector with some enhancements, described below.

Selecting a descendant of the current element

All descendants of the current element are listed in a structured dropdown.

To select a particular element click on it in the dropdown:

To select all elements with that tag name or classes, hover over the submenu indicator and select one of the selectors:

Targeting descendants generates the simplest selectors and keeps interaction modular.

For example, we can have an interaction that animates all <p> elements within the main element, selected with the selector that targets <p> descendants. Then, we can copy or apply this interaction to other elements and it will work there without changes.

If possible, setup interactions in such a way that the action is set on the element that contains all different subparts of the interaction.

For example, use div.popup as the interaction target and then animate this element and its sub-elements with a custom animation.

Selecting any element on the page

Sometimes we need to select elements that are not part of the element where the interaction is defined.

For example, we want to animate the Open popup button that lies outside of the div.popup element.

Use Select on the page to open a element selector popup:

As long as this popup is open, you can click on any element on the page to select it as a target. Hold down CTRL (CMD on Mac) to select multiple elements.

Click on Done to use the selection.

Edit the custom selector

Use Edit selector to edit the selector directly.

The selector syntax is similar to CSS selectors, with a couple of powerful extensions.

Select the main element

Use this to select the main element. In most cases, this is the same as not selecting any target at all.

Select descendants of the main element

By default, the selector targets elements within the main element.

For example, if we’re selecting the target for the Interactions action that is placed on the div.popup, the selector will search for matching elements inside the div.popup element.

So, if the selector .close will target only elements with the close class inside the div.popup, not any .close element on the page.

Select any element on the page

Prefix the selector with the $ sign to target any element on the page.

For example, $.close would target all .close elements on the page, not just those inside div.popup.

Select the closest matching element

Prefix the selector with ^ to target the closest matching element, either the element itself or its first matching parent.

For example, when adding a close interaction to the close button inside the popup, use ^.popup to target the parent popup. We could use $.popup, but that would target all .popups on the page, not just the one inside which the close button is pressed.

Note that this will also match the current element if it matches the selector. For example, doing ^div on a <div> will return this div.

The parent selector has another useful feature:

Select a descendant of the closest parent.

Let’s say you want to animate all <p> elements inside the .popup when the .close button is pressed. You can target them with ^.popup|p.

This keeps the interaction self-contained and reusable.

Selector extensions

Pinegrow adds a group of selector extensions that allow creating powerful interactions, for example iterating through a group of elements.

Extensions have the syntax ->extension with optional parameter such as ->extension(parameter) and are appended to the base selector, for example ^.my-component|.slide->first(4).

Extension are:

Get the first N elements

Use <base selector>->first to get the first element that matches the base selector. Add a number parameter to get the first N elements, for example p.lead->first(2) returns the first two lead paragraphs.

Get the last N elements

Similarly, using the ->last or ->last(N) extension will return the last N elements that match the base selector.

Get the next element

Use <base selector>->next to get the next sibling element of the first element that matches the base selector.

For example, if the layout is:

p.first
p.second
p.third

p->next will return p.second.

p.second->next will return p.third and p.third->next will return p.first.

Add the parameter (<selector>) to take the group of elements that match the base selector, look for the first element that matches the <selector> and return the next element.

For the layout:

p.first.current
p.second
p.third

p->next(.current) will return p.second.

So, what is the difference between using p.current->next and p->next(.current)?

Imagine a layout:

p.first
p.second.current
img
p.third

p.current->next will return the img, while p->next(.current) will return the p.third.

Getting the previous element

Use ->previous to return the previous element. The syntax is the same as the ->next extension.



Last updated on November 17, 2020 at 2:11 am


Print this article