Designing a Web Page with CSS - HTML, CSS, and Dynamic HTML - page 204

Figure 3-55 Applying a structural pseudo-class

displays the text of the first li i element
in the navigation list in uppercase

◗

3. Save your changes to the file and then reload home.htm in your Web browser.
Verify that the first entry in the navigation list, Home, is displayed in uppercase
letters.
Trouble? If you are running a version of Internet Explorer earlier than 9, the first
list item will not be displayed in uppercase letters.

Pseudo-Elements
Tammy has a few more changes she wants you to make to the Sunny Acres home page.
In the fi rst paragraph of the home page, she would like the following styling:

• The fi rst line displayed in all uppercase letters
• The fi rst letter increased in size and displayed as an initial cap

So far, all of your selectors have been based on elements that exist somewhere within
the document hierarchy and are tagged in the HTML fi le. You also can defi ne selectors
based on pseudo-elements, which are not elements that exist in the document hierarchy
but rather are based on objects that exist in the rendered Web page. For example, a para-
graph is an element in the document hierarchy, but the fi rst line of the paragraph is not. It
only exists as an object once the paragraph has been rendered by the browser. Similarly,
the fi rst letter of that paragraph is also not a document element, but it certainly can be
identifi ed as an object in the Web page. Both the fi rst line and the fi rst letter are pseudo-
elements, and you can create a style rule to format their appearance. A selector based on
a pseudo-element is similar to one that is based on a pseudo-class, such as

selector: pseudo-element {styles;}
where pseudo-element is an abstract element from the rendered Web page. Figure 3-56
lists some of the pseudo-elements supported by CSS.

Figure 3-56 Pseudo-elements

Pseudo-Element Description Example

first-letter

The first letter of the
element text

p:first-letter {font-size:200%}

first-line

The first line of the
element text

p:first-line {text-transform:
uppercase}

before

Content inserted directly
before the element

p:before {content:”Special! “}

after

Content inserted directly
after the element

p:after {content:”eof”}