when your visitors mouse over it.

a:active lets you determine how the links looks when a visitors clicks on them. In other words, it covers the brief nanosecond when someone's pressing the mouse button, before releasing it.

More Pseudo-Classes and –Elements

The CSS guidelines define several powerful pseudo-class and element selectors beside the ones covered so far. Unfortunately, the most popular browser aroundInternet Explorer 6 for Windowsdoesn't recognize them. So most Web surfers can't appreciate any design elements you create with these selectors (at least until they upgrade to IE 7 or switch to Mozilla Firefoxor trade in their PCs for Macs).

before

The :before pseudo-element does something no other selector can: It lets you add content preceding a given element. For example, say you wanted to put "HOT TIP!" before certain paragraphs to make them stand out, like the boxes in this book that say "UP TO SPEED" and "POWER USERS' CLINIC."

Instead of typing that text in your page's HTML, you can let the :before selector do it for you. This approach not only saves on code, but if you decide to change the message from "HOT TIP!" to, say, "Things to know," then you can change every page on your site with one quick change to your style sheet.

(The downside is that this special message is invisible to browsers that don't understand CSS or don't understand the :before selector.)

First, create a class (.tip, say) and apply it to the paragraphs that you want to precede with the message, like so:

. Then, add your message text to the style sheet:

p.tip:before {content: "HOT TIP!" }

Whenever a browser encounters the .tip class in a

tag, it dutifully inserts the text "HOT TIP!" just before the paragraph.

The technical term for text you add with this selector is generated content, since Web browsers create (generate) it on the fly. In the page's HTML source code, this material doesn't exist.

Whether you realize it or not, browsers generate their own content all the time, like the bullets in bulleted lists and numbers in ordered lists. If you want, you can even use the :before selector to define how a browser displays its bullets and numbers for lists.

Despite its potential, Internet Explorer 6 and earlier versions ignore the :before selector offhand. Even up-to-date programs like Safari and Firefox don't apply generated content consistently

:after

Exactly like the :before selector, the :after pseudo-element adds generated contentbut after the element, not before. You can use this selector, for example, to add closing quotation marks (") after quoted material.
:first-child

Going back to the HTML family tree analogy for a moment, recall what a child tag is: any tag directly enclosed by another tag. The :first-child pseudo-element lets you select and format just the first of however many children an element may have.


A

tag, for example, which creates a bulleted list, can have many list items as children. To format just the first list item (in boldface), you can write this rule:

 

li:first-child { font-weight: bold; }



Because the :first-child selector includes only the name of the child element, never the parent, this style formats any

• tag that's the first child of any other tag, not just
  . List items always fall within lists, so you know the selector li:first-child affects all lists on the pageunordered or ordered. With other tags, however, the :first-child selector gets a little tricky.
  
  Since the HTML parent-child relations can change each time you edit a Web page, it's hard to predict how the :first-child selector will behave as you develop your Web site. Also, this selector doesn't work at all in Internet Explorer 6 or earlier versionsanother reason to avoid it unless absolutely necessary.
  
  :focus
  
  The :focus pseudo-class works much like the :hover pseudo-class. While :hover applies when a visitor mouses over a link, :focus applies when the visitor does something to indicate her attention to a Web page elementusually by clicking or tabbing into it. In programmery lingo, when a visitor clicks in a text box on a Web form, she puts the focus on that text box. That click's a Web designer's only clue as to where the visitor's focusing her attention.
  
  The :focus selector is mostly useful for giving your visitor feedback, like changing the background color of a text box to indicate where he's about to type. (Single-line text fields, password fields, and multi-line boxes are common targets for the :focus selector.) This style, for example, adds a light yellow color to any text box a visitor clicks or tabs into:<br /> <br /> </p> <blockquote> <font color="#ff0000">input:focus { background-color: #FFFFCC; }</font><br /> </blockquote> <p><br /> The :focus selector applies only while the element's in focus. When a visitor tabs into another text field or clicks anywhere else on the page, she takes the focusand the CSS propertiesaway from the text box.<br /> <br /> </p>