HTML and CSS Reference
In-Depth Information
ID Selectors
ID selectors are similar to class selectors, but they are prefaced by a pound sign (
#
) instead of
a period. So, to select this
div
element:
<div id="main-content">
<p>This is the main content of the page.</p>
</div>
we would need a selector like this:
#main-content {
width: 400px;
}
or this:
div#main-content {
width: 400px;
}
Note
You may ask yourself why you'd ever need to join an element selector with an ID selector, since IDs
are valid only once in each (X)HTML document. The answer lies in the fact that a single style sheet can be
used over many documents. So, while one document may have a
div
element with the ID of content, the
next might have a paragraph with the same ID. By leaving off the element selector, you can select both of
these elements. Alternatively, you can ensure that only one of them is selected by using the element selector
in conjunction with your ID selector.
■
ID selectors cannot be chained together, since it is invalid to have more than one ID on
a given element in (X)HTML. However, it is possible to chain class selectors and ID selectors,
such as
div#main-content.error
.
(X)HTML's Family Tree
(X)HTML documents are hierarchical in nature. Nearly every element in your (X)HTML docu-
ment is the child of another element. For example,
head
and
body
are children of the
html
element. A
ul
element will likely have children
li
elements.
Another way to describe the parent and child relationship is as
ancestor
and
descendant
.
Although they may seem alike, there is a vital difference: an item's parent element is exactly
one level up the family tree from it. While the parent is an ancestor, there are likely additional
ancestors two or more levels above it. Consider the following (X)HTML code:
<body>
<h1>This is a <em>really</em> important header</h1>
<p>This is a <strong>basic</strong> paragraph</p>
</body>
