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

first-line

Internet Explorer Netscape Navigator Opera WebTV

Windows Macintosh (All Platforms) (All Platforms)

4.0 5.0 5.5 6.0 4.0 4.5 5.0 4.x 6.0 3.5 5.0 1.0

N N Y Y N N Y N Y Y Y N

first-letter