Descendant selectors

You can use the parent/child relationships of well-structured code to find a "hook" for applying CSS to elements.

This helps you reduce the clutter of unnecessary classes, ids, and elements.

For example:

	<div id="item">
		<h1 class="xHead">Example Heading</h1>
		<p class="content">Example <span class="word">content</span></p>
	</div>

For the CSS, you might want something like this:

	#item {border: 1px solid #000; padding: 2em;}
	h1.xHead {font-size: 2em;}
	p.content {color: red;}
	span.word {color: green;}

But you could achieve the same thing with less stuff using descendant selectors:

	<div id="item">
		<h1>Example Heading</h1>
		<p>Example <span>content</span></p>
	</div>
	
	#item {border: 1px solid #000; padding: 2em;}
	#item h1 {font-size: 2em;}
	#item p {color: red;}
	#item p span {color: green;}