# 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:
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 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](https://docs.zerowork.io/using-zerowork/using-selectors/how-to-build-custom-selectors/lists-incremental-css-selectors "mention")) or - which is a bit more advanced - as siblings (you will learn about it in the final chapter of this guide [addressing-siblings](https://docs.zerowork.io/using-zerowork/using-selectors/how-to-build-custom-selectors/addressing-siblings "mention")).
### 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.
#### Loose hierarchy
Alternatively, you can use space to define a loose hierarchy, for example:
body button
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:** tag1 > tag2 > tag3 > tag4 > tag5
**Loose hierarchy:** tag1 tag3 tag5 (did you note how tag2 and tag4 are skipped?)
**Combination of strict and loose hierarchy:** tag1 tag3 > tag4 (note how 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, and they will work just as well:
**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="" %}