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.

Descendant selector

In the article in this tutorial on Classes, IDs and tag CSS, selectors were introduced. This article introduced three methods of selection and their CSS code:

CSS
p{
	/*Tag selector*/
}
.class{
	/*Class selector*/
}
#id{
	/*ID selector*/
}
								

These three different options for selecting elements in HTML using CSS are limited however. They give no way of selecting the children of these elements, for instance.

CSS defines a range of more advanced selectors which the next few articles will describe.

Descendant selector

The descendant selector is used to select any descendant (child, grandchild, great-grandchild and so on) of an element.

The descendant selector is very broad and can be used for instance so that different lists display differently. The following sample shows this:

CSS
.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
Provide feedback on this page
Comments are sent via email to me.