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. :)
Add a comment
|
1 Answer
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
aelement
that is a child of alielement (li > a)
that is a child ofulelement (ul > li)
that is a child of an element with the IDnavigation(#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:
ais a descendant of#navigation,ulandlibut only a child ofliliis a descendant of#navigationandul, but only a child ofululis 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)
