Part 4.2Child selector

Child selector

The child selector is very similar to the descendant selector in CSS except that instead of selecting all descendants (children, grandchildren and so on), it only focuses on direct children.

For a li element this is particularly useful as it will allow styling of only the list itself - not sub-lists of the element.

The > (greater than) symbol is used to represent a child:

li {
	font-weight: 100;
}
.special-list > li{
	font-weight: bold;
}
								

<ul class="special-list">
	<li>This is the first element of the list</li>
	<li>This is the second element of the list</li>
	<li>This is a nested list
		<ul>
			<li>This is a nested element</li>
		</ul>
	</li>
</ul>