CHAPTER 18 ■ DROP CAPSFirst-Letter Drop Cap
Problem You want to display the first letter of a block as a drop cap without adding elements to the
HTML document.
In general terms, you want to style the first letter of a terminal block element, such as a
paragraph.
Solution first-letter is a design pattern built into the CSS language. first-letter is called a
pseudo-element selector because it selects a subset of content in an element rather than all
the content in an element.
You can tag a terminal block element with a class or ID of your choosing. You can combine
the first-line pseudo-selector with classes, IDs, and types of your choosing. Make sure
the first-line selector is the last item in the selector.
Pattern^
CSS .CLASS:first-letter { STYLES }^
or
#ID:first-letter { STYLES }
or
ELEMENT:first-letter { STYLES }
Location first-letter works just like first-line. It works only on terminal block elements. It does
not work on structural block elements or inline elements. first-letter is not inherited by
child elements.
Limitations The first-letter selector works best with font and text properties. Browsers cannot
position pseudo-elements and have trouble aligning them. This means you may not be able
to control the vertical placement of the drop cap. Notice that the second drop cap in the
example has been relatively positioned and offset 2000 pixels. This should move the drop
cap off the screen, but as the example demonstrates, the text selected by first-letter does
not respond to positioning.
This solution displays correctly in all modern browsers. Be aware of the following for older
browsers. Opera 9 does not select the first letter of table cells, and in a list item Internet
Explorer 7 selects the list marker along with the first letter. Internet Explorer 6 positions a
first-letter background image differently from Internet Explorer 7, and both position it
differently from the other major browsers. As shown in the source code for the example, you
can solve this problem by loading different style sheets for Internet Explorer versions 6 and
7 and using background-position to adjust the position of the background.
Related to Pseudo-element Selectors (Chapter 3)