HTML and CSS Reference
In-Depth Information
Pseudo-elements differ from pseudo-classes in that they don't select states of
elements; they select parts of an element:
FIGURE 1.4 first-letter and
:first-line in effect!
first-letter and first-line . You can select the first letter inside a given
element using the first-letter pseudo-element and the first line using
first-line . In my King Arthur blog example (introduced in Chapter 2 and
found in the king-arthur-blog-example code download folder), I've cre-
ated a rather cool drop cap and first-line effect using both of these pseudo-
elements in tandem (see Figure 1.4 for the result):
#main>article>p:first-of-type:first-line {
font-variant: small-caps;
#main>article>p:first-of-type:first-letter {
font-size: 400%;
float: left;
/* loads more styling! */
Search WWH ::

Custom Search