Child selector in CSS
The child selector > allows you to
select elements by direct nesting within
each other.
Syntax
selector1 > selector2 {
}
Example
Let's select all the b tags that
are directly inside the p tags
and color them red:
<p>
text <b>+</b>
</p>
<p>
text <i><b>-</b></i>
</p>
p > b {
color: red;
}
:
Example
Let's select all b tags directly
inside elements with the class
.block and color
them red:
<p class="block">
text <b>+</b>
</p>
<p class="block">
text <i><b>-</b></i>
</p>
<p>
text <b>-</b>
</p>
.block > b {
color: red;
}
:
Example
Let's select all elements with the class
.elem that are directly inside
elements with the class .block
and color them red:
<p class="block">
text <span class="elem">+</span>
</p>
<p class="block">
text <i><span class="elem">-</span></i>
</p>
<p class="block">
text <span>-</span>
</p>
<p>
text <span class="elem">-</span>
</p>
.block > .elem {
color: red;
}
:
See also
-
the descendant selector,
that allows you to select an element by its parent -
the adjacent sibling selector
that allows you to select an element by its sibling -
the general sibling selector
that allows you to select elements after a given -
the universal selector
that allows you to select all elements
