Use Cascading Style Sheets Selectors
By Nicholas Chase2004-06-18
Pseudo-classes and pseudo-elements
|
|
Finally, let's look at a group of selectors that is not based on any particular element but on specific conditions within the document: pseudo-classes. Designated by a colon preceding the name, pseudo-classes are independent of particular elements and instead look at what's happening within the document. The most common (and most widely implemented, though not available in Netscape 4.x) is the :hover pseudo-class, which applies when the user rolls the mouse over an element, as shown in the code in Listing 9 and in Figure 7.
Listing 9. Using the :hover pseudo-class
...
<style type="text/css">
* { font-family: Verdana }
td { font-size: 10pt }
.category { font-weight: bold; }
td.category { font-style: italic }
#bestinshow { color: red }
p a { text-decoration: none }
h4 + h4 { font-style: italic }
:hover { background-color: red }
</style>
...
Figure 7. Using the :hover pseudo-class
Other, less-widely supported pseudo-classes include :first-child, :link, :visited, :active, and :focus and :lang. Note that a pseudo-class can be applied to a specific element type, like this:
p:first-child { font-size: larger }
Pseudo-elements are similar to pseudo-classes (and share syntax with them) but define content within the document. Pseudo-elements defined by the CSS2 Recommendation include:
:first-line, which selects the first line of content, even if that changes based on the size of the window
:first-letter, which can be used for effects such as drop caps
:before and :after, which are combined with another selector and are usually used to insert content into the document, like this:
*.category:before { content: "Category: " }
Tutorial Pages:
» The basic page and the universal selector
» Type selectors
» Class selectors
» ID selectors
» Family relationships: descendants, children, and siblings
» Pseudo-classes and pseudo-elements
» Summary
First published by IBM developerWorks
|
