How the ancestry works

Hi, I just need a little help on how to tell a parent from a child or siblings in css and html it just keeps confusing me.

(-_-)

An example might help.

<p> This is a paragraph.
  <span> This is a span element inside the paragraph. </span>
  <span> This is the <em>second</em> span element. </span>
</p>

Notice that the span elements are inside the p element, and the em element is also inside the p element.
So the span and em elements are descendants of the p element.
And the p element is an ancestor of these span elements and the p element is an ancestor of the em element.

Here, the p element is a parent of the span element, but the p element is not a parent of the em element.
And the parent for the em element is the second span element.
The span elements are children of the p element.
The two span elements have the same parent, so the two span elements are siblings.
The first span element has one sibling element here, which is the second span element.

The second span element has one child, which is the em element.
The em element has no sibling elements.

1 Like

With a commendable explanation, the above simply states, look to the outermost OPENTAG and ENDTAG. Everything in between is descendent. The SPAN elements are sibling elements and the EM is a child element of its parent SPAN.

Learn to read these examples in as simple terms as possible. Don’t read any complicating factors into HTML. There are none.

2 Likes

This helps alot, thanks for the simple explanation :grinning: :call_me_hand: