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.