From the course: CSS: Selectors

The HTML family tree: Parents, children, ancestor, descendant, and siblings - CSS Tutorial

From the course: CSS: Selectors

Start my 1-month free trial

The HTML family tree: Parents, children, ancestor, descendant, and siblings

“

- [Instructor] Just as with real world families, HTML has a family tree, there are ancestors and descendants, parents and children, and even a few siblings along the way. You may not have thought about family relationships in HTML before, so let's look at this a little bit more closely before moving on to selectors that take advantage of family relationships. Let's start by considering this piece of HTML, to keep the example simple, we'll start with just the body tag. It's frequently, but not always, these elements that are contained within the body that we're concerned with selecting. Let's map out how this bit of code might look if it were configured as a flow chart. Body is the tag that starts it all, it's the tag from which all of the other tags originate. So it's shown at the top of our chart. Now look at our HTML and think about where the children of the body are located. There are two children of the body, a section and an aside, children are directly descended from their parents with no additional tags in between. We could portray this relationship in a hierarchical tree like this, body is the parent, while section and aside are the children. Next, let's look deeper at the section. Where are its children? Do those children have children? Focusing just on the section portion of our code, the section has three children, an h1, a paragraph, and another paragraph. Note that that second paragraph has a child of its own, an A tag. If we draw this in a family tree representation, it might look like this diagram here. Now you try it for the aside portion of the tree. Identify the parent and the children, do those children have children? Hopefully your answer looks like this, the aside is the parent with the h2 and the ul as the children. The ul has two more children, the two li tags and the one li has another child, a strong tag. Now I've added the aside family tree to the rest of our family tree here. Once the HTML is drawn this way, we can easily start to describe the relationships between the tags. For example, what's the relationship between the h1 and these two paragraphs? Right, they're siblings, they're at the same level in the family tree with the same parent, the section tag. How about the relationship between this li and the strong tag? The li is the parent and strong is the child. So what's the relationship between the body tag and this li? The body is an ancestor while the li is a descendant. We could spell it out as great-grandparent to great-grandchild, but in programming, once we get too far beyond parent and child, we stop keeping track of the levels. Ancestor and descendant is perfectly fine. Finally, how about the relationship between the section tag and the h2? Well, we might describe them as aunt and niece, or uncle and nephew, but those aren't really relationships in HTML, in fact, these two tags are unrelated, there is no inheritance between the tags specifically. Understanding no relationships can be just as important as understanding the relationship in CSS.

Contents