If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

CSS: The descendant selector

The descendant selector is a way to select elements that are located somewhere underneath other elements, according to the tree structure of the webpage. This selector is actually multiple selectors combined together, but separated by a space. The first selector is the "ancestor", the element(s) that must be located higher in the tree, and the second selector is the "descendant", the element(s) that must be located somewhere underneath the ancestor in the tree.
DOM tree sample
To understand ancestor/descendant relationships, you need to think about the webpage is a tree. An example tree structure is shown in the image above. The ul is an ancestor of the em below it, but it is not an ancestor of the other em. That means that a "ul em" selector will only select a single em, not both of them.

Want to join the conversation?

No posts yet.