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
<li> Moon </li>
<li> Mars
<li> Deimos </li>
<li> Phobos </li>
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.
Search WWH ::

Custom Search