> For the complete documentation index, see [llms.txt](https://docs.zerowork.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.zerowork.io/using-zerowork/using-selectors/how-to-build-custom-selectors/hierarchy.md).

# Hierarchy

Understanding hierarchy is one of the most important steps when it comes to building custom selectors. Do not skip this section!

Every web element on a website adheres to a hierarchy. See the hierarchy for the search button on the Wikipedia page:

![](/files/Gme241YQ1PtV8FP69jqU)

For the search button on Wikipedia in the above example, the hierarchy would be:&#x20;

<mark style="background-color:yellow;">body > div > form > fieldset > button</mark>

Note that some elements are on the same level (see picture below). This means these elements are items in a list and siblings to each other. They cannot be defined in a hierarchical way as shown in the example above (with >). They can be either defined as a list (you will learn about it later in chapter [Lists: Incremental CSS Selectors](/using-zerowork/using-selectors/how-to-build-custom-selectors/lists-incremental-css-selectors.md)) or - which is a bit more advanced - as siblings (you will learn about it in the final chapter of this guide [Addressing Siblings](/using-zerowork/using-selectors/how-to-build-custom-selectors/addressing-siblings.md)).

![](/files/FaE09DkZt6CfeUiCwlrM)

### Strict and Loose Hierarchy

#### Strict hierarchy

Whenever you use >, the hierarchy is defined in a strict way - in the example above (*body > div > form > fieldset > button*), *body* MUST be followed by *div* and if not the selector will fail.&#x20;

#### Loose hierarchy

Alternatively, you can use space to define a loose hierarchy, for example:&#x20;

<mark style="background-color:yellow;">body button</mark>

This means that *body* is followed by *button* somewhere below and it doesn't matter if there are other elements between *body* and *button*.

### Build Selectors Based on Hierarchy

In some cases, to build a selector, you may need to additionally define the hierarchy. You can simply define tags that follow each other, like this:

**Strict hierarchy:** <mark style="background-color:yellow;">tag1 > tag2 > tag3 > tag4 > tag5</mark>

**Loose hierarchy:** <mark style="background-color:yellow;">tag1 tag3 tag5</mark> (did you note how tag2 and tag4 are skipped?)&#x20;

**Combination of strict and loose hierarchy:** <mark style="background-color:yellow;">tag1 tag3 > tag4</mark> (note how tag2 is skipped but tag4 strictly follows tag3)

And for any tag inside the hierarchy you can add attributes like this:

<mark style="background-color:yellow;">tag1\[attribute='value'] > tag2\[attribute='value']</mark>

<mark style="background-color:yellow;">tag1 > tag2\[attribute='value']</mark>

<mark style="background-color:yellow;">tag1\[attribute='value'] > tag2</mark>

For the example of the search button on Wikipedia, the list of selectors we built can be extended by these ones, and they will work just as well:

**Strict hierarchy:** <mark style="background-color:yellow;">body > div > form > fieldset > button\[class\*='pure-button']</mark>

**Loose hierarchy:** <mark style="background-color:yellow;">body form button\[class\*='pure-button']</mark>

**Combination of strict and loose hierarchy:** <mark style="background-color:yellow;">body > div button\[class\*='pure-button']</mark>

### Video Tutorial: Selector Hierarchy

{% embed url="<https://youtu.be/Z8-JNTNRLrA>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.zerowork.io/using-zerowork/using-selectors/how-to-build-custom-selectors/hierarchy.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
