HTML and CSS Reference
In-Depth Information
In order to differentiate between pseudo-elements and pseudo-classes, CSS3 changes
the syntax of pseudo-elements by adding an extra colon to the selector:
selector::
pseudo-element
{styles;}
To maintain backward compatibility with older browsers, however, you still should
use the single colon syntax.
The style rules to format the fi rst line and fi rst letter of the opening paragraph are:
Only one pseudo-element
may be used per selector.
section > p:first-of-type:first-letter {
font-size: 250%;
font-family: 'Times New Roman', Times, serif;
}
section > p:first-of-type:first-line {
text-transform: uppercase;
}
Notice that the selector uses the
first-of-type
pseudo-class combined with the
first-letter
and
first-line
pseudo-elements so that the styles are applied only
to the fi rst paragraph of the
section
element and then to the fi rst letter and fi rst lines
within that paragraph. After you apply the rule, the fi rst letter will appear 250% larger
than the surrounding text, and in a Times New Roman or other serif font. In addition, all
of the text on the fi rst line will appear in uppercase.
Working with Pseudo-Elements
• To apply a style to the first line of an element, use the pseudo-element selector
selector
:first-line
where
selector
is the name of the element or elements in the document.
• To apply a style to the first letter of an element, use the following pseudo-element
selector:
selector
:first-letter
• To insert a text string before an element, use the style rule
selector
:before {content:
text
;}
where
text
is the content of the text string.
• To insert a text string after an element, use the following style rule:
selector
:after {content:
text
;}
Since Tammy wants to apply this style rule only to the home page and not to every
page on her Web site, you'll add the rule to an embedded style sheet placed within the
home.htm
fi le.
