HTML and CSS Reference
In-Depth Information
Example 3.1: Selecting elements in nested lists
(continued)
<h3>Planetary List 2:</h3>
<!-- second list -->
<ul id="list2">
<li>
Mercury
</li>
<li>
Venus
</li>
<li>
Earth
<ul>
<li>
Moon
</li>
</ul>
</li>
<li>
Mars
<ul>
<li>
Deimos
</li>
<li>
Phobos
</li>
</ul>
</li>
</ul>
</body>
</html>
he irst CSS statement in the head section's
style
element
li { padding: .25em; border: thin solid black; }
places a 1-pixel border around every list item, at every depth, and gives each
item a bit of padding to make it look nicer. he second CSS statement
li li { background-color: #ccc; width: 6em; }
selects only list items that are descendents of other list items. hose nested list
items have a gray background and a limited width. Finally, the third CSS state-
ment selects just the top-level list items of the second list, causing the items to
be loated into a horizontal bar. he list bullets are removed, and 5 pixels of
margin is added to separate the top-level items:
#list2 > li { float: left; list-style-type: none; margin-right: 5px; }
his HTML is displayed by a browser in a manner similar to Figure 3.1.
Note that the nested lists of moons are the same in both lists; only the top-level
list items are changed in the second list by the preceding CSS statement.
