（3）選擇元素——（5）為項目列表加樣式（Styling list-item levels）

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

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

The horizontal class floats the element to the left 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.

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

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

The second line uses the child combinator(>) to add the horizontalclass to all 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. Now our nested list looks similar to the following screenshot:

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

•  Is a descendant of the element with an ID of selected-plays
•  (#selected-plays)
•  Does not have a class of horizontal(:not(.horizontal))

When we add the sub-levelclass to these items, they receive the shaded background defined in the stylesheet. Now the nested list looks similar to the following screenshot: