Section 3.6. Pseudo-Classes and Pseudo-Elements | Dreamweaver CS3: The Missing Manual

3.6. Pseudo-Classes and Pseudo-Elements

Sometimes you need to select parts of a Web page that don't have tags per se, but are nonetheless easy to identify, like the first line of a paragraph, or a link as you move your mouse over it. CSS gives you a handful of selectors for these doohickeys pseudo-classes and pseudo-elements .

3.6.1. Styles for Links

Four pseudo-classes let you format links in four different states based on how a visitor has interacted with that link. They identify when a link's in one of the following four states:

a:link selects any link that your guest hasn't visited yet, while the mouse isn't hovering over or clicking it. This style is your regular, unused Web link.
a:visited is a link that your visitor has clicked before, according to the Web browser's history. You can style this type of link differently than a regular link to tell your visitor, "Hey, you've been there already!"
a:hover lets you change the look of a link as your visitor passes the mouse over it. The rollover effects you can create aren't just for funthey can provide useful visual feedback for buttons on a navigation bar.

You can also use the :hover pseudo-class on elements other than links. For example, you can use it to highlight text in a <p> or <div> when your guests mouse over it.

Note: In Internet Explorer 6 and earlier, :hover works only on links. For a JavaScript workaround, see the box in Section 3.6.2.4.
a:active lets you determine how a link looks as your visitor clicks. In other words, it covers the brief nanosecond when someone's pressing the mouse button, before releasing it.

Chapter 9 shows you how to design links using these selectors to help your visitors click their way around your site.

Tip: You can live a long, healthy , productive life without reading about the selectors in the next few sections. Many Web designers never use them. The selectors you've learned so fartag, class, ID, descendent , group , and so onlet you build absolutely beautiful, functional, and easily maintained Web sites. If you're ready for the fun stuffdesigning Web pagesthen skip to the tutorial in Section 3.1. You can always finish reading this discussion some cold, rainy night by the fire.

GEM IN THE ROUGH
Styling Paragraph Parts

The typographic features that make books and magazines look cool, elegant, and polished didn't exist in the early Web era. (After all, when did scientists ever worry about looking cool?) CSS provides two pseudo-elements: first-letter and :first-line that give your Web pages the design finesse that print has enjoyed for centuries.

The :first-letter pseudo-element lets you create a drop cap an initial letter that jumps out from the rest of the paragraph with bigger or bolder font formatting, as at the beginning of a book chapter.

Styling the :first-line of a paragraph in a different color keeps your reader's eye moving and makes text appear appealing and fresh. (If you're intrigued, Chapter 6 is all about formatting text.)

3.6.2. 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). Meanwhile, you can work around this problem using JavaScript, as described in the box in Section 3.6.2.4.

3.6.2.1. :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: <p class="tip"> . Then, add your message text to the style sheet:

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

Whenever a browser encounters the .tip class in a <p> 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. (See the content property listed in Appendix A in Section A.1 for more information and a list of resources on this topic.)

3.6.2.2. :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.

3.6.2.3. :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. (In Figure 3-5, <h1>, <p>, <h2>, and <ul> are all children of the <body> tag.) The :first-child pseudo-element lets you select and format just the first of however many children an element may have.

POWER USERS' CLINIC
Getting Internet Explorer 6 Up to Speed

If you're a Web designer, you've probably got the latest version of Firefox, Opera, or Safari on your computer. Unfortunately, most of the world doesn't. The vast majority of Web surfers use Internet Explorer 6 on Windows and IE 5.5 has a respectable number of holdouts as well. The fact is, most people resist upgrading their softwareif they even know how to do it. Even with the release of IE 7, IE 6 will probably stick around for quite some time.

So, when you're designing a mainstream Web site (not one for hardcore netizens), you should still factor Internet Explorer 6 into your designs. But that doesn't mean giving up all the cool selectors discussed on these pages, such as :before, :after , and :hover . Believe it or not, with a little help from JavaScript and several pioneering and stubborn programmers before you, you can write scripts that teach IE how to handle these types of selectors.

For example, CSSHOVER teaches Internet Explorer 6 for Windows what to do with the :focus (below) and :hover selectors (when applied to elements other than links). You can read about and download this quick, simple script at www.xs4all.nl/~peterned/csshover.html . This cool bit of JavaScript simplifies the creation of CSS-based drop-down navigation menus like the ones you can read about at www.seoconsultants.com/css/ menus /tutorial/.

An even more ambitious project, from JavaScript expert Dean Edwards, lets Internet Explorer 5 and 6 for Windows take advantage of all CSS 2 selectors as well as many space age selectors from the not-yet-finalized CSS 3 standard. Edwards ' set of scriptsnamed IE7lets you use selectors like :before, :after, :first-child , and the advanced selectors discussed in Section 3.1. You can learn more about this amazing project at http://dean.edwards. name /IE7/overview/ .

A <ul> tag, for example, which creates a bulleted list, can have many list items as children. (In Figure 3-5, the <ul> tag has three <li> 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 <li> tag that's the first child of any other tag, not just <ul>. 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. For example, in Figure 3-5, the selector p:first-child would have no effect at all, since the <p> tag is a child of the <body> tag, but it isn't the first childthe <h1> tag is.

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.

3.6.2.4. :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 <textarea> 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:

 input:focus { background-color: #FFFFCC; }

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.

Tip: Learning how to write selectors can sometimes feel like learning hieroglyphics. To translate a selector into straightforward language, visit the Selectoracle at http://gallery.theopalgroup.com/ selectoracle /. This great resource lets you type in a selector and spits out a clear description of which page elements on a page the style affects.