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 here 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