pseudo element selectors
Explanation
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 CSS1 felt it important to easily enable in web pages are provided for by pseudo element selectors.
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 as well as other effects.
CSS2 introduced two new pseudo-element selectors, :before and :after.
The :before pseudo 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.
Syntax
The :first-line selector selects the first line of a particular element. The form of this selector is the selector for 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 before and after selectors are the same, but substituting the keyword :before or :after.
So for example if you wanted to insert some generated content before every heading of level 1 you would use:
h1:before
And if you wanted to insert some generated content after every code sample on your page, you would use:
code:after
Use
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 to achieve these effects.
The :before and :after pseudo element selectors allow the insertion of content before or after an element.
You might like to think about this example. It might be convenient to insert the text string "Chapter " before all your headings of level 1.
Browser support
Detailed browser support information for this feature can be found in the full version of the Westciv CSS Guide, or in our CSS Browser Support Table.
next: selector groups
(C)1997-2001 Western Civilisation Pty. Ltd.