To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

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:

CSS
li {
	font-weight: 100;
}
.special-list > li{
	font-weight: bold;
}
								
HTML
<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>
								
  • This is the first element of the list
  • This is the second element of the list
  • This is a nested list
    • This is a nested element
Code previewClose
Feedback 👍
Comments are sent via email to me.