Tips

• The first-letter and first-line selectors are called pseudo-elements, since they refer to actual content that can't be manually marked as an independent element. OK, you could conceivably mark each first letter of the paragraph with a special span tag (though it would be cumbersome), but the content of the first line depends on a myriad of factors, including such uncontrollable issues as the size of the visitor's window and the visitor's monitor resolution.

  Figure 9.25. Here the selector will choose just the first letter of each p element. For the corresponding (X)HTML code, see Figure 9.22 on page 144.

  

• All current major browsers (including Internet Explorer from version 6 on) support both the first-line and first-letter pseudo-elements.

• According the CSS specifications, punctuation that precedes the first letter should be included in the selector. Firefox and Opera do this right. IE (as of version 7) doesn't, and instead considers the punctuation itself as the first letter.

  Figure 9.26. The first-letter selector could conceivably be used to create drop caps (once we've learned more properties besides color).

  

• Only certain CSS properties can be applied to first-letter pseudo-elements: font, color, background, text-decoration, vertical-align (as long as the first-letter is not floated), text-transform, line-height, margin, padding, border, float, and clear. We'll discuss all of these in Chapters 10 and 11.

  Figure 9.27. The specifications say the first-letter pseudo-element should include any punctuation that precedes the first letter. Fire-fox and Opera (left) do that, IE (up to and including version 7, shown on the right) does

  

• You may combine the first-letter or first-line pseudo-elements with more complicated selectors than that which I've used in this example. For example, if you wanted just the first-letter of the p elements in the works divs, your selector would be div.works p:first-letter.