Child Selector
A child selector is used to select elements that are direct children of another HTML element.
What is a Child Selector?
A child selector targets only the elements that are directly inside a specified parent element.
The greater-than symbol > is used to
define a direct parent-child relationship.
Child Selector Flow
.container
.container > p
Basic Syntax
parent > child {
property: value;
}
The > symbol selects only direct children
of the parent element.
Example 1: Direct Child Paragraph
div > p {
color: blue;
}
Output
Direct child paragraph
Nested paragraph
Example 2: Direct Child List Items
ul > li {
color: green;
}
Output
- First Item
- Second Item
Example 3: Direct Child Heading
section > h2 {
color: red;
}
Output
CSS Tutorial
Child Selector vs Descendant Selector
| Selector | Meaning |
|---|---|
div p |
Selects all paragraph descendants. |
div > p |
Selects only direct paragraph children. |
Important Points
-
The
>symbol is used for a child selector. - Only direct children are selected.
- Nested elements are not selected unless they are direct children.
- Child selectors provide more precise control than descendant selectors.
Summary
A child selector selects only the direct children
of a specified parent element. It uses the
> symbol to define the
parent-child relationship.