Selecting target elements | Pinegrow Web Editor
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 element or its parent

Prefix the selector with ^ to target the closest matching element or its 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.



Last updated on September 26, 2020 at 4:26 am


Print this article