Child Selectors
In this lesson, we meet a new type of selector, the child selectors. Let's begin!
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 ...
Access this course and 1400+ top-rated courses and projects.