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>
<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; }
<h3> The Raven </h3>
<p> Once upon a midnight dreary, while I pondered, weak and weary,
Over many quaint and curious volume of forgotten lore&mdash; </p>
<p> While I nodded, nearly napping, suddenly there came a tapping, As
of some one gently rapping, rapping at my chamber door. </p>
Search WWH ::

Custom Search