We have discussed CSS selectors in the last three articles in this sereis. We have said that a selector can be a markup element, an attribute selector based on the class and ID attributes, or a structured selector based on the document structure. CSS introduces pseudo elements, which we will be discussing in this article. This is one area of functionality that you can't achieve using HTML, and you will be amazed how easily you can achieve it in CSS.
Learn CSS, part 7: Pseudo Elements - Using the ::first-letter Pseudo Element (Page 3 of 6 )
The ::first-letter pseudo element applies your styling rules to the first letter of the first word of the first line in block level elements. A block level element is that element that occupies its parent element's complete area (we will talk about this later in the series). I think that by now you understand what it does, so let's take a look at an example. Add the following CSS code to the CSS file:
This code will style the first letter of the first word of the first line in all the block level elements to have a blue background with yellow text as Tahoma 2 em. Reload the Web page to see the effect.
Okay, I know that some of you now may be saying "How does the ::first-letter override the styling rules of the ::first-line?" and some others would say "How do some selectors override the styles of other selectors?" I will answer these questions in the article covering inheritance and cascade, which is coming soon in the series. As you can see, only the block level elements (the <p> and <div> elements) have been styled. The <span> element has not been styled because it's an inline element.
With the ::first-letter pseudo element you can use color properties, background properties, padding properties, margin properties, border properties, clear, line-height, text-shadow, text-decoration, text-transform and float. These are discussed in the appropriate articles in the series. This pseudo element is supported in IE 5.5, 6 and Mozilla 1.7 and Opera 7.5