Since the inception of the web as an ASCII text only medium for the sharing of scientific papers (no style, no images, no page layout), the web has become a new medium of expression and publication. It still takes its cue from the printed page, being primarily a static medium for the expression of the type of information that traditionally has been published on paper.
Two traditional typographical effects which the developers of CSS felt important to easily enable in web pages are provided for by the pseudo element selector.
Very often in traditional publishing the first letter and the first line of a paragraph appear differently from the rest of that paragraph.
The first-line selector selects the first line of a particular type of element, for example (and most usually) a paragraph.
The first-letter selector selects (surprisingly enough) the first letter of an element, allowing you to create what is often termed the drop cap effect.
The first line selector selects the first line of a particular element. The form of this selector is the name of the element, followed by first-line.
For example, the selector which selects the first line of every blockquote is:
BLOCKQUOTE:first-line
and that which selects the first-line of each paragraph is:
P:first-line
The first letter selector is almost identical, replacing letter for line. The first letter of a blockquote would be selected by the following:
BLOCKQUOTE:first-letter
while the first letter of a paragraph is selected with this selector:
P:first-letter
The first-line selector is used to give a different effect for the first line of each paragraph, or other element.
The first-letter selector lets you give a drop cap effect or other effect to the first letter of an element.
Remember, the idea behind style sheets is to separate out the appearance of your pages from the content. Without this selector, it would be necessary to physically mark up the first line or first letter of a paragraph or other element.