Selecting by hierarchy (Must know)

This chapter explains how to combine the selectors seen so far using hierarchy operators to retrieve elements by their relationship in the DOM.

Getting ready

Before we dive into the code, we should be aware of the weapons in our belt. The following is a table describing all of the selectors that belong to this category:


Identifying Character





Parent > Children

(for example, #title > .red)

Selects all direct children "Children" of the parent specified by "Parent".



Ancestor Descendants

(for example, .wrapper .red)

Selects all descendants "Descendants" having in their ancestor list "Ancestor".

Next Adjacent


Prev + Next

(for example. h1 + p)

Selects ...

Get Instant JQuery Selectors now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.