# 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: 

<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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.