Descendants in CSS

Transcript

In the previous lesson, I showed you how to break your web page up into groups. Using the header, footer and section tags, I was able to change the background color of the different groups. 

Now that you can group tags, you'll end up with tags inside of other tags inside of other tags instead of other tags. Well, you get the idea. To make managing tags easier in this lesson we are going to learn about Descendents. You'll need to learn some web development lingo to explain how the tags are related to each other. 

What's actually pretty cool is that web developers use a common vocabulary. Let's look at some of my code, and I'll show you what I mean. 

My header has an h1 and a paragraph inside of it. You call the header, the parent tag, you call the h1 and the paragraph, children of the header tag. Let's look at another more complicated example. In my ordered list, I have an <a> tag inside of an Li that's inside of an OL. You could call the <a> tag a grandchild of the ordered list because its parent is the Li. And the Li’s parent is the <ol>. 

Did you notice how both the <a> tag and the Li are inside of the <ol> tags. You've call these tags descendants of the <ol>. A descendant is a tag that’s somewhere inside another tag. The <a> tag is also inside of the Li. This means that the <a> tag is a descendant of the Li too. 

I know this might have gotten a little confusing. So I'm going to leave you with this little chart. 

Take your time and check it out. We will continue to review this in the next lesson.