Descendant selector in CSS
The descendant selector, represented by a
space (' '), allows you to select tags
nested within a given parent
Syntax
selector1 selector2 {
}
Example
Let's select all the p tags inside
the div tags and color them red:
<div>
<p>
text
</p>
<p>
text
</p>
</div>
div p {
color: red;
}
:
Example
Let's select all p tags inside the
element with #elem and color them
red:
<div id="elem">
<p>
text
</p>
<p>
text
</p>
</div>
#elem p {
color: red;
}
:
Example
Let's select all p tags inside
elements with the class .block
and color them red:
<div class="block">
<p>
text
</p>
<p>
text
</p>
</div>
.block p {
color: red;
}
:
Example
Let's select the b tags
inside the p tags inside the
div tags and color them red:
<div>
<p>
text <b>+</b>
</p>
</div>
div p b {
color: red;
}
:
See also
-
the child selector
that allows you to select elements by direct nesting -
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