HTML and CSS Reference
In-Depth Information
:only-child
An element that is the only child of its parent
:only-of-type
An element that is the only sibling of its type
:empty
An element that has no children or text
Pseudo-elements are similar to pseudo-classes but select a portion of the
element's content instead of the entire element. he
first-line
and
first-
letter
pseudo-elements are the most commonly used. Example 3.3 shows how
to create a “drop cap” letter using the
first-letter
pseudo-element applied to
a
first-child
pseudo-class. Only the irst character of the irst paragraph in
each division is enlarged to 300 percent of its normal size. Figure 3.3 shows
how a browser displays this code.
Example 3.3: Using the
first-letter
pseudo-element to create a
“drop cap” letter
<!DOCTYPE html>
<html>
<head>
<title>Example 3.3</title>
<style type="text/css">
body { padding: 0 36px; font-family: cursive; }
h3 { text-align: center; }
div p:first-child:first-letter { font-size: 300%; color: #999; }
</style>
</head>
<body>
<h3>
The Raven
</h3>
<div>
<p>
Once upon a midnight dreary, while I pondered, weak and weary,
Over many quaint and curious volume of forgotten lore—
</p>
<p>
While I nodded, nearly napping, suddenly there came a tapping, As
of some one gently rapping, rapping at my chamber door.
</p>
</div>
</body>
</html>
