There are two quite distinct types of pseudo element selectors, which are used for quite different purposes.
first-line and first-letter
Since its inception 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 it important to easily enable in web pages are provided for by the first two pseudo element selectors which were included in CSS 1.
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 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 as well as other effects.
Note that there are a number of (logical) restrictions that apply to these two selectors. The first-line selector can only be used with introduction | block level elements. As well, it can only be used to apply certain properties: font properties, color properties, background properties,
clear. The first letter selector can likewise only be used with block level elements, and it can only be used to apply the following properties: font properties, color properties, background properties, margin properties, padding properties, border properties,
vertical-align (only if
before and after
CSS 2 introduced two new pseudo element selectors, before and after. These are used in together with the generated content features of CSS to insert content either before or after an element.
The before pseudo element selector selects an element and allows content (text, images and other content) to be inserted before the selected element. The after pseudo selector selects an element and allows the insertion of content after the selected element. For more on these, see the section on Generated Content.
Why are these called pseudo element selectors? Think about this: is there an HTML element for the first letter of an element? What about the first line? No. So, when we "select" the first line, we are really inventing something to select, which isn't in the HTML. That's why we refer to these as pseudo elements.
The form of the first-line selector is the name for the element, followed by
For example, the selector which selects the first line of every blockquote is:
and that which selects the first-line of every paragraph is:
The first-letter selector is almost identical, replacing letter for line. The first letter of a blockquote would be selected by the following:
while the first letter of a paragraph is selected with this selector:
The before and after selectors are the same, but substituting the pseudo elements
So for example if you wanted to insert some generated content before every heading of level 1 you would use:
And if you wanted to insert some generated content after every code sample on your page, you would use:
You can create pseudo element selectors using selectors other than type selectors as well. For example, you might want to select the first letter of all paragraphs of class important. The selector for this would be
Fantastic product, I've gone from knowing nothing about web-design, to creating compliant XHTML and CSS.
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 these selector, it would be necessary to physically mark up the first line or first letter of a paragraph or other element to achieve these effects.
The before and after pseudo element selectors allow the insertion of content before or after an element.
There are lots and lots of uses for this - here's just one. It might be convenient to insert the text string "Chapter " before all your headings of level 1.