Supported CSS selectors

  • 15 March 2023
  • 2 replies

Userlevel 2
Badge +1


Are sibling CSS selectors supported for defining events?

I’ve been trying to use the below selectors to distinguish between 2 instances of an element and neither retrieves any results:

  • [data-label=”x”] + [data-label=”my-button”]
  • [data-label=”y”] ~ [data-label=”my-button”]

Thanks for your help


Best answer by Jonas-Heap 15 March 2023, 16:02

View original

2 replies

Userlevel 3
Badge +2

Hi! Great question, and I’m happy to help answer it.

The short answer is that sibling selectors are not supported for defining events.

The slightly longer, more detailed answer is that Heap captures the HTML hierarchy directly above the target element when an event occurs, but it doesn’t capture sibling elements. (Heap captures the hierarchy so that events you define later can retroactively match existing autocaptured data.) The upshot is that if an element isn’t directly above the target element in the HTML hierarchy, it isn’t available for defining events.

Depending on the HTML you’re looking at, there may be alternatives you can use for defining these events, such as a unique ID value, unique combination of classes or data attributes, or even the target text of the element in question!

Userlevel 2
Badge +1

Thanks Jonas, I understand