Child Selectors
In this lesson, we meet a new type of selector, the child selectors. Let's begin!
We'll cover the following...
We'll cover the following...
Similar to the descendent selector, CSS lets you style the children of another tag with a child selector. The child selector uses an angle bracket (>) to indicate the relationship between the two elements. While the descendent selector applies to all descendants of a tag (children, grandchildren, and so on), the child selector lets you specify which child of which parent you want to deal with.
For example, if you want to select the <h2> tags within an <article> tag, use the article > h2 child selector, as demonstrated in the Listing below.
Listing: Styling the children of another tag with a child selector
<!DOCTYPE html>
<html>
<head>
<title>Child selectors</title>
<style>
article > h2 {
font-style: italic;
}
</style>
</head>
<body>
<h2>Outside of article</h2>
<article>
<h2>Within article</h2>
<div>
<h2>Not directly within article</h2>
</div>
</article>
</body>
</html>
When you display this page (image below), only the second <h2> will ...