Exercise : LotR Selectors (by Alex Miller)

<!DOCTYPE html>
<html>
	<head><title>LotR FTW</title></head>
	<body>
		<h1>Lord of the Rings Fan Page</h1>
		<div id="intro">
			<h2>Introduction</h2>
			<p>LotR is the best movie ever!</p>
		</div>
		<div id="content">
			<div class="bordered">
				<p>There are three volumes:
					FotR, T2T, and RotK.</p>
			</div>
			<h2>Characters</h2>
			<ul>
				<li>Bilbo</li>
				<li>Frodo</li>
				<li>Gandalf</li>
			</ul>
			<h2>Plot</h2>
			<p>It's too long to describe.
				Just read the books!</p>
		</div>
		<div id="footer">
			<h2 class="bordered">Thank you!</h2>
		</div>
	</body>
</html>

Write a CSS selector for:

  1. all h2 elements
  2. element with ID intro
  3. h2 elements inside intro
  4. h2 elements, except those inside intro
  5. p elements inside content
  6. p elements directly inside content
  7. elements with class bordered
  8. h2 elements with class bordered

Exercise solution

  1. All h2 elements: h2
  2. element with ID intro: #intro
  3. h2 elements inside intro: #intro h2
  4. h2 elements, except those inside intro: #content h2, #footer h2
  5. p elements inside content: #content p
  6. p elements directly inside content: #content > p
  7. elements with class bordered: .bordered
  8. h2 elements with class bordered: h2.bordered