Hierarchy
Last updated
Last updated
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) or - which is a bit more advanced - as siblings (you will learn about it in the final chapter of this guide Addressing Siblings).
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.
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.
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']
