This is a topic that I should have understood a bit better when I first started writing CSS. A thorough understanding of descendent selectors and their relation to CSS is very powerful when styling your Websites.
So what is a descendent selector exactly? Well, consider the following code:
<html>
<head>
<title>Daedal Works</title>
</head>
<body>
<h1>A heading in the body</h1>
<p>This paragraph has text that is<em>italicized</em>.</p>
</body>
</html>
It is helpful to use the analogy of a family tree when talking about descendent selectors. The family members that we want to talk about right now are ancestors, descendants, parents, children, and siblings.
- Ancestor is any tag that is above another in the HTML nesting. In our example the <html> tag is is the ancestor of every other tag. It is the ancestor of the <head> tag, the <body> tag, the <h1> tag, and so on. This is because all of these other tags are nested inside of the <html> tag. Any tag that is nested above another is its ancestor. The the ancestors of the <em> tag are the <p>, <body>, and <html> tags.
- Descendent is a tag that is inside of one or more tags. So, the <p> tag is a descendent of <body> tag and the <html> tag. The <body> tag is only a descendent of the <html> tag. Basically, a tag is a descendent of any tag that it is nested inside of.
- Parent is a tag that is the first tag above another tag in the nesting. A tag’s closest ancestor is its parent. In our case, the <body> tag is the parent of the <p> tag. The <html> tag is not the parent of <p> tag. In this case its more like a Grand Pappy but we won’t worry about that now.
- Child is— you guessed it, the tag that is nested one level below its parent tag. So, in our example, the <h1> and the <p> tags are both children of the <body> tag. The <em> tag is not a child of the <body> tag but is a child of the <p> tag.
- Sibling tags are those that are nested in the same hierarchy of nesting as one another. For example, the <h1> tag and the <p> tags are siblings and the <body> tag and the <head> tag are siblings.
Now for the style
Okay, so what does this have to do with CSS? Say that you have a situation where you need to style the <em> tags that are inside of <h3> tags to the color red. You could use:
em {color: red;}But this is going to style the <em> tag on every page that uses this style sheet to red! So instead lets try this:
h3 em {color: red;}Now only the <em> tags that are inside of the <h3> tags will be red. This becomes very powerful and is not limited to tag selectors. It can be used with classes and ids as well. For instance:
p.excerpt a {color: blue}This says apply the color blue to every link (a) that is a descendent of a paragraph (p) that has the excerpt class applied to it (this is hypothetical because you would probably use the quote tag here.)
p .excerpt a {color: blue}This looks almost identical but notice the space between (p) and the class? This space means that the <a> tag will be styled inside of any tag styled with the excerpt class while the excerpt class itself is a decendent of a <p> tag. Whew! Okay, one more thing. If you want more flexibility you can leave off the (p) so that any tag with the excerpt tag applied will be styled like so:
.excerpt a {color: blue}That’s the end of this post but just the beginning of how these relationships can help you style selectors. I’m sure that I will write more about this in the future.
Best wishes.
Tags: CSS, Descendent selectors, HTML