CSS Selectors

jQuery supports most of the selectors included in CSS specifications 1 through 3, as outlined on the World Wide Web Consortium’s site: http://www.w3.org/Style/CSS/#specs. This support allows developers to enhance their websites without worrying about which browsers (particularly Internet Explorer 6 and below) might not understand advanced selectors, as long as the browsers have JavaScript enabled.

Note

Responsible jQuery developers should always apply the concepts of progressive enhancement and graceful degradation to their code, ensuring that a page will render as accurately, even if not as beautifully, with JavaScript disabled as it does with JavaScript turned on. We will continue to explore these concepts throughout the book.

To begin learning how jQuery works with CSS selectors, we’ll use a structure that appears on many websites, often for navigation—the nested, unordered list.

<ul id="selected-plays">
  <li>Comedies
    <ul>
      <li><a href="http...