Subselectors help you make your element targeting more precise. They’re useful when a simple selector (like a button or label) is not unique enough, and you want to anchor it more reliably inside a container.
When to use a subSelector
-
When the same label or text appears multiple times on a page.
-
When the main element is too broad (e.g., a big container or an iframe).
-
When you need to anchor an element inside another element (like a label inside a form).
-
When no page segmentation is possible you can base the selector on a unique text on the page (for Tooltips, Tags or Validators).
Step-by-step instructions
We are guiding you through an example on how to write the subSelector.
-
Launch the Userlane Editor for the page you’re working on.
-
Select the bigger which includes both elements and anchor it with element text by clicking Add Element Text (like ‘Willkommen bei Wikipedia’). Change “contains” to “matches” if a certain appears multiple times.
Input A:
-
Copy the selector that was generated for this big element (you’ll need it soon).
-
Click Cancel to exit that selection.
-
Click on Reselect Element
-
Select the label or smaller element you want and again anchor it with its text (like ‘Kunst und Kultur’ by clicking Add Element Text . Change “contains” to “matches” if a certain appears multiple times.
Input B:
-
Copy the 1st selector you had from the big element before this
-
Keep just one selector as the main anchor (IFRAME#myframe) and add the second selector as a subSelector (make sure writing is correct)
-
Simplify the Selector:
Trim it to the essentials: keep just the label or a specific DIV with a concrete, stable ID. Remove anything extra (long ancestor chains, unrelated classes, headings, etc.).
If your selector shows “score” bits, remove them.
-
Check brackets and punctuation
Make sure every ( has a ), every [ has a ], and quotes are paired. If the Syntax is correct, Apply Changes can be clicked.
Click on the image for a bigger version of our example:
Best practices
Contains vs Matches
-
Contains → looks for part of the text
-
Matches → looks for an exact text match
-
If wording appears multiple times, use Matches.
Selector hygiene
-
Copy–paste text from the UI to avoid typos.
-
Remove unnecessary “heaviness” (long paths or unrelated divs).
-
Prefer unique attributes like IDs. The Editor is going to display if an element is unique.
-
Always test in the actual page state before finalizing.
Common pitfalls
-
Forgetting to switch to Matches when there are duplicates.
-
Extra spaces or hidden line breaks breaking the match.
-
Leaving in long, fragile paths instead of simplifying to the stable part.
-
Missing or unbalanced brackets.
