| You can also select just the first letter or first line of an element and then apply formatting to that. Figure 9.24. Adjusting the width of the window changes the content of the first lines (and thus, what is formatted). To select the first line of an element: 1. | Type tag, where tag is the selector for the element whose first line you'd like to format. | 2. | Type : (the colon). | 3. | Type first-line to select the entire first line of the element referenced in step 1. |
Figure 9.22. There is nothing highlighted here because you can't identify the first line until the page is displayed in the browser. To select the first letter of an element: 1. | Type tag, where tag is the selector for the element whose first line you'd like to format. | 2. | Type : (the colon). Figure 9.23. Here the selector will choose the first line of each p element. | 3. | Type first-letter to select the first letter of the element referenced in step 1. |
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.
|