Let's suppose that we want the top-level items, and only the top-level items—Comedies, Tragedies, and Histories—to be arranged horizontally. We can start by defining a horizontal class in the stylesheet:

.horizontal {
  float: left;
  list-style: none;
  margin: 10px;
}

The horizontal class floats the element to the left-hand side of the one following it, removes the bullet from it if it's a list item, and adds a 10-pixel margin on all sides of it.

Rather than attaching the horizontal class directly in our HTML, we'll add it dynamically to the top-level list items only, to demonstrate jQuery's use of selectors:

$(document).ready(function() {
  $('#selected-plays > li').addClass('horizontal');
});

Listing 2.1

As discussed in Chapter 1, Getting Started, we begin the jQuery code by calling $(document).ready(), which runs the function passed to it once the DOM has been loaded, but not before.

The second line uses the child combinator (>) to add the horizontal class to all the top-level items only. In effect, the selector inside the $() function is saying, "Find each list item (li) that is a child (>) of the element with an ID of selected-plays (#selected-plays)"

With the class now applied, the rules defined for that class in the stylesheet take effect, which in this case means that the list items are arranged horizontally rather than vertically. Now our nested list looks like this:

Styling all the other items—those that are not in the top level—can be done in a number of ways. Since we have already applied the horizontal class to the top-level items, one way to select all sub-level items is to use a negation pseudo-class to identify all list items that do not have a class of horizontal. Note the addition of the third line of code:

$(document).ready(function() {
  $('#selected-plays > li').addClass('horizontal');
 $('#selected-plays li:not(.horizontal)').addClass('sub-level');li:not(.horizontal)').addClass('sub-level');
});

Listing 2.2

This time we are selecting every list item (<li>) that:

When we add the sub-level class to these items, they receive the shaded background defined in the stylesheet:

.sub-level {
  background: #ccc;
}

Now the nested list looks like this: