HTML and CSS Reference
In-Depth Information
his applies the margin settings to only the top-level divisions in the body of
the page, not to any divisions nested within other elements. Only direct child
elements are selected, no grandchildren or other distant relatives. Example 3.1
shows two identical unordered lists with IDs
list1
and
list2
. Each has lists
nested within its list items.
Example 3.1: Selecting elements in nested lists
<!DOCTYPE html>
<html>
<head>
<title>Example 3.1</title>
<style type="text/css">
li { padding: .25em; border: thin solid black; }
li li { background-color: #ccc; width: 6em; }
#list2 > li { float: left; list-style-type: none; margin-right: 5px; }
h3 { font: 12pt verdana; }
</style>
</head>
<body style="padding: 36px;">
<h3>Planetary List 1:</h3>
<!-- first list -->
<ul id="list1">
<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>
continues
