Pseudo-class: first-letter

I have been using the : first-letter pseudo -class for quite some time now to assign two background images to a single element. The most interesting is that : first-letter , one of the few pseudo-classes that work in the 6th Internet Explorer. But there is one little trick you need to know.

To the point. As stated above, we have one HTML element. Let it be the first level heading.
')

  <h1> About us </ h1> 

We give it basic styles, background color and background image (asterisks on the right):

  h1 {
 border-top: 1px solid # 094eaa;
 border-bottom: 1px solid # 094eaa;
 background: # 002261 url (/images/stars.jpg) right center no-repeat;
 } 

Everything is as usual. But now we need to add a star to the left. This is done like this:

  h1: first-letter {
 background: url (/images/star.jpg) left center no-repeat;
 padding: 7px 0 6px 30px;
 } 

The most important point here is that you have to put a space between the pseudo -class itself : first-letter and the opening brace, otherwise the pseudo-class will not work in IE6.

  h1: first-letter {/ * Does not work * /
 property: value;
 }

 h1: first-letter {/ * It works, as there is a space before the curly brace * /
 property: value;
 } 

There is one more thing. If you need to specify the same styles for several elements and one of them is a pseudo-class: first-letter, then you need to insert a space when listing the elements, before the comma. I.e:

  h1: first-letter, .someclass {/ * Does not work * /
 property: value;
 }

 h1: first-letter, .someclass {/ * It works, as there is a space before the comma * /
 property: value;
 } 

That's basically it. padding is needed so that the background image is more tall than the font and not to be under the text itself.

Original on my blog.