Style Sheet Property Reference - Pseudo-Element and Pseudo-Class Selectors (Page 3 of 4 )
In rare instances, you might want to assign a style to a well-defined component of an element (pseudo-element) or to all elements that exhibit a particular state (pseudoclass).
A pseudo-element gets its name because the CSS declaration of this type causes the browser to act as if it has inserted an artificial element into an existing element. For example, CSS defines pseudo-elements for the first letter and first line of a block-level element. The HTML source code for the real element might be something simple:
<p>A mere paragraph.</p>
But a browser that implements the :first-letter and :first-line pseudo-elements would treat the p element as if it were structured as follows:
<p><p:first-line><p:first-letter>A</p:first-letter> mere paragraph.</p:first-line></p>
The location of the </p:first-line> end tag, of course, depends on the rendered version of the p element. If the paragraph were sized to fit a narrow column, and the first line word-wrapped after the word “mere,” the :first-line pseudo-element’s invisible end tag would follow the space after “mere.” The point of all of this is that you can assign numerous style properties to these very specific portions of a block-level element, such as a drop capital letter:
Regardless of the pseudo-element structure or style assignments, the document tree is unaffected. In the simple p element example, the element contains one text child node.
To help differentiate pseudo-elements from pseudo-classes in CSS markup, CSS3 introduces a new notation using a double colon, as in the following:
Browsers that implement the new notation (all mainstream browsers except IE through version 7) also support the old notation to accommodate legacy code.
As of CSS2, four pseudo-elements have been defined, as shown in Table 4-2. Note that the :first-letter pseudo-element acknowledges style properties only of the fol lowing types: background , border , clear , color , float , font , letter-spacing , line-height , margin , padding , text-decoration , text-shadow , text-transform , vertical-align (when float is none ), and word-spacing . The :first-line pseudo-element acknowledges style properties only of the following types: background , clear , color , font , letter-spacing , line-height , text-decoration , text-shadow , text-transform , vertical-align , and word-spacing . CSS3 introduces the optional ::selection pseudo-element, whose style properties are to be applied to a user selection (e.g., as a way to style selected text in a printer-friendly manner).
Table 4-2. CSS2 pseudo-elements
The space immediately after an element (see content property)
The space immediately before an element (see content property)