Hierarchical Selectors

Now let’s move on to hierarchical selectors, which use document structure as a way to select elements, using the previous markup example.

• body ul would select all ul elements that are descendants of body elements.
• ul > li would select all li elements that are children of ul elements.
• ul + img would select all img elements that immediately follow a ul sibling element (i.e. are their next sibling).
• ul ~ img would select all img elements that follow a ul sibling element (i.e. come after them and have the same parent node).

The third and fourth items in this list probably look fairly similar. The difference is in the word “immediately." By this example, the third item in the list would only select the Advertisment #1 image because it comes immediately after its ul sibling element in the document. The fourth item in the list, on the other hand, would select both images because both follow their ul sibling element.