> 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.
Every web element on a website adheres to a hierarchy. See the hierarchy for the search button on the Wikipedia page:
For the search button on Wikipedia in the above example, the hierarchy would be:
body > div > form > fieldset > button
Note that some elements are on the same level (see picture below). This means they are siblings and cannot be defined in relation to each other using `>`. They can be addressed as a list (described in a later chapter, [Lists: Incremental CSS Selectors](/using-zerowork/using-selectors/how-to-build-custom-selectors/lists-incremental-css-selectors.md)) or, more advanced, as siblings (described in the final chapter, [Addressing Siblings](/using-zerowork/using-selectors/how-to-build-custom-selectors/addressing-siblings.md)).
### Strict and Loose Hierarchy
#### Strict hierarchy
Whenever you use `>`, the hierarchy is defined strictly. In the example above (`body > div > form > fieldset > button`), `div` must be a direct child of `body`, `form` a direct child of `div`, and so on. If this hierarchy changes, the selector will fail.
#### Loose hierarchy
Alternatively, you can use a space to define a loose hierarchy. For example:
body button
This means that *button* appears somewhere **below** *body*, and it doesn't matter if there are other elements **between** them.
### 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:** tag1 > tag2 > tag3 > tag4 > tag5
**Loose hierarchy:** tag1 tag3 tag5 (tag2 and tag4 are skipped)
**Combination of strict and loose hierarchy:** tag1 tag3 > tag4 (tag2 is skipped but tag4 strictly follows tag3)
And for any tag inside the hierarchy you can add attributes like this:
tag1\[attribute='value'] > tag2\[attribute='value']
tag1 > tag2\[attribute='value']
tag1\[attribute='value'] > tag2
For the example of the search button on Wikipedia, the list of selectors we built can be extended by these ones:
**Strict hierarchy:** body > div > form > fieldset > button\[class\*='pure-button']
**Loose hierarchy:** body form button\[class\*='pure-button']
**Combination of strict and loose hierarchy:** body > div button\[class\*='pure-button']
### Video Tutorial: Selector Hierarchy
{% embed url="" %}