HTML and CSS Reference
In-Depth Information
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
Trouble? If you are running a version of Internet Explorer earlier than 9, the first
list item will not be displayed in uppercase letters.
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
The first letter of the
element text
p:first-letter {font-size:200%}
The first line of the
element text
p:first-line {text-transform:
Content inserted directly
before the element
p:before {content:”Special! “}
Content inserted directly
after the element
p:after {content:”eof”}
Search WWH ::

Custom Search