hide - Understanding jQuery

Whose Children Are These?
If we are to avoid using IDs completely, except when we need to assign them to a context, how
do we navigate the DOM?
We do so by using parents and children. But which elements are children of which parent
elements? How does the DOM determine that? Just like in the real world, children belong to
parents. But those parents can also be children of their parents, and so on. It’s just a matter of
perspective. Let’s take a look at this diagram that explains relationships between parents and
children:
If each box on this diagram represents an HTML element, then the first child of the body tag is
also the parent of all green children.
The second child of the body tag is also the parent of all yellow children.
Each individual yellow “child” is also an HTML element. Then black children 1, 2 and 3 are the
children of one of the yellow child whose parent is the second child of body tag. Trivial stuff
when you have a visual guide.
Using :nth-child Selector
Instead of using IDs for everything we will use the :nth-child selector that works on tag names
Let’s assume that we have a DIV and that we have a few other elements stored inside it; in particular
a DIV element, a SPAN element followed by 3 more DIV elements:
89