How do you define this CSS selector?

Question

Code:

#navigation > ul > li > a 

Descendant and child.

Is "a" child of li, or the holde code. Or is "a" child li but descendant to the rest. I'm not quite into the rules. Hope you can help me out. :)

Answer 1

You read the selector one by one. Whether you read from left to right or right to left is up to you, but selectors are basically linear.

This selector means:

Select any a element
that is a child of a li element (li > a)
that is a child of ul element (ul > li)
that is a child of an element with the ID navigation (#navigation > ul).

Every element that is a child of its parent is also a descendant of its parent as well as that parent's parents. To put it in simpler terms: an element that's contained within another element is that element's descendant. Note that it's also a child only when it's directly contained within that element (and not something else nested in between) — people often refer to this as a "direct child" for emphasis, but a child is by definition directly contained in its parent anyway.

Thus, the structure of this selector implies the following:

• a is a descendant of #navigation, ul and li but only a child of li

• li is a descendant of #navigation and ul, but only a child of ul

• ul is both a descendant and a child of #navigation

Additional reading:

• Descendant selector and child selector from the spec
• What does the ">" (greater-than sign) CSS selector mean? (with an illustration)