CHAPTER 3 CSS SELECTORS AND INHERITANCEPseudo-element Selectors
Problem You want to select the first letter or first line of an element.
Solution HTML CSS
No markup is required. Combine the first-letter and first-line^
pseudo-selector with classes, IDs, and types of
your choosing.
Patterns CSS
ELEMENT:first-letter { STYLES }
or .CLASS:first-letter { STYLES }
or #ID:first-letter { STYLES }
or ELEMENT:first-line { STYLES }
or .CLASS:first-line { STYLES }
or #ID:first-line { STYLES }
Location first-letter and first-line work only on terminal block elements. They do not work on
inline elements or structural block elements.
Notes first-letter and first-line are called pseudo-element selectors because they select a
subset of content in an element rather than all the content in an element. In other words,
they create a pseudo-element.
Limitations Internet Explorer 6 ignores a pseudo-element selector unless it is the last selector in a chain
of selectors. Newer versions fix this problem.
The first-letter selector works best with font and text properties. Browsers cannot
position pseudo-elements and have trouble aligning them. In other words, position, left,
right, top, and bottom have no effect on pseudo-elements. Also, vertical-align works
inconsistently on pseudo-elements.
Browsers have exceptional cases where they may not select the first letter or may select more
than the first letter. For example, no major browser selects the first letter when an image or
object precedes it. For example, Opera 9 does not select the first letter of table cells, and
Internet Explorer 6 selects the list marker along with the first letter of a list item, and no
matter how much we want them to go away, old browsers are still around to haunt us.
Finally, pseudo-element selectors bring out bugs in browsers, so be sure to test your use of
them in all major browsers.
Example In the example, I set three different pseudo-element selectors to the same set of styles. I did
not use a grouping selector because Internet Explorer 6 does not recognize pseudo-selectors
when they are part of a grouping selector.
Related to Class Selector, Pseudo-class Selectors^