---
title: "Elements, paths, and scopes"
slug: "what-should-i-know-about-elements-paths-and-scopes-1"
updated: 2025-03-12T20:27:23Z
published: 2025-03-12T20:27:23Z
canonical: "help.mozenda.com/what-should-i-know-about-elements-paths-and-scopes-1"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.mozenda.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Elements, paths, and scopes

### What is an element?
A Web page *element* is one of the many building blocks making up a Web page. An element can be a snippet of text, an image, a link, a video, etc. If it's on the page, it's an element.

### What is an element path?
An *element path* is a [CSS3 selector](https://www.w3schools.com/cssref/css_selectors.asp){target="_blank"}. Because CSS selectors have certain limits in that they do not support selecting parents or match on text, we have added a few pseudo-selectors to make it easy to match any element you might want.

**Dexi-specific selectors:**
* **:visible**
Selects only visible elements. Visibility is determined by whether an element has both a width and height greater than 0, like jQuery.

* **:eq($index)**
Selects a specific element in a group of matched elements, like jQuery.

* **:first / :last**
Selects the first/last element in a group of matched elements.

* **:self**
Selects the element itself. Useful when matching current scope in a loop/iteration.

* **:prev / :next**
Selects the previous or next element for every matched element.

* **:parent**
Selects the parent of every matched element.

* **:closest($selector)**
Selects the closest parent element that matches $selector. Matches only content, not HTML tags or attributes.

* **:text_contains("$text")**
Selects elements containing $text. Matches only content, not HTML tags or attributes.

* **:text_matches("$regex")**
Selects elements matching the regular expression $regex. Matches only content, not HTML tags or attributes.

* **:text_is("$regex")**
Selects elements matching $text exactly. Matches only content, not HTML tags or attributes.

* **:text_is($in['$text'])**
Selects elements exactly matching an input value. Matches only content, not HTML tags or attributes.

* **:text_start("$text")**
Selects elements beginning with $text. Matches only content, not HTML tags or attributes.

* **:text_end("$text")**
Selects elements ending with $text. Matches only content, not HTML tags or attributes.

* **:text_bestmatch("$text")**
Selects elements most closely matching $text. Matches only content, not HTML tags or attributes.

#### Using inputs and outputs

You can include your input and output variables in your [dexi.io](https://www.dexi.io/){target="_blank"} CSS3 selectors:

**$in['input field'] / $out['output field']**
Includes the input or output variable without any added quotes.
				
Example:
![1.png](https://cdn.document360.io/03076343-9561-4857-8a4e-9f3bfed20ced/Images/Documentation/1%281%29.png){height="" width=""}

**@in['input field'] / @out['output field']**
Includes the input or output variable with added quotes.
				
Example:                    
![2.png](https://cdn.document360.io/03076343-9561-4857-8a4e-9f3bfed20ced/Images/Documentation/2%281%29.png){height="" width=""}

**Further Reading**
W3Schools introduction to CSS selectors: 
[http://www.w3schools.com/cssref/css_selectors.asp ](https://www.w3schools.com/cssref/css_selectors.asp){target="_blank"}

Mozilla Guide to CSS selectors: 
[https://developer.mozilla.org/enUS/docs/Web/Guide/CSS/Getting_started/Selectors ](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors){target="_blank"}

jQuery selectors: 
[http://api.jquery.com/category/selectors/](https://api.jquery.com/category/selectors/){target="_blank"}

### What is DOM scope?
When iterating through elements, the robot uses something we call scope or *DOM* (*Document Object Model) scope*. Each iteration of a loop will create a scope for the current element in the iteration list, and any subsequent path selectors will be relative to this scope. 

See the illustration below for a visual representation of how DOM scope works.

![3 \(2\).png](https://cdn.document360.io/03076343-9561-4857-8a4e-9f3bfed20ced/Images/Documentation/3%20%282%29.png){height="" width=""}

Scopes are automatically cleared when changing to a new page, but you can manually clear a scope using the *Clear Scope* step. Reference elements outside the DOM scope using pseudo-selectors like **:parent** or **:closest(.something)** that travel up the DOM tree.

**Custom DOM Scope**
You may also define your own DOM scopes, and you can have several scopes within scopes. This can be useful if you have some snippet that expects a certain path, and that path can be found in multiple places. Then you can set a container for the data you want to extract and use the same snippet in multiple places.