Descendant and child selectors

The easiest way to style descendant elements is by using descendant selectors and child selector.

A descendant selector is made of two or more selectors, a parent element and a descendant element respectively, separated by only white space.

A child selector is made of two or more selectors, a parent element and a child element respectively, separated by >.

These two selectors are very similar in principle.

Example

CSS descendant and child selectors:

<html>
<head>
<title>CSS tutorial</title>
<style type="text/css">
	div p { border:2px groove #999; font-family:serif; }
	div * span { color:teal; }
	div > ul { list-style:none; border:1px solid green; }
	div ul > li span { font-weight:bold; }
</style>
</head>
<body>

<br />
<div>
	<p>Descendant selector, example #1: <i>div p</i> selector matches all paragraphs inside the &lt;div&gt; element</p>
	<p>Descendant selector, example #2: <span><i>div * span</i> selector matches all span elements that are grandchildren to main &lt;div&gt; element</span></p>
	<ul>
		<li>Descendant and child selector, example #3: <i>div &gt; ul</i> selector matches all unordered lists inside the &lt;div&gt; element</li>
		<li>Child selector, example #4: <i>div ul &gt; li span</i> selector matches all <span>span elements</span> inside the <i>li</i> tag from the unordered lists inside the &lt;div&gt; box.</li></ul>
</div>

</body>
</html>

›› go to examples ››

Descendant and child selectors

Example

CSS descendant and child selectors:

Comments

About

Contact

Get Connected