Jamie Balfour

Welcome to my personal website.

Find out more about me, my personal projects, reviews, courses and much more here.

Part 4.2Child selector

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
Feedback 👍
Comments are sent via email to me.