3.6. Pseudo-Classes and Pseudo-ElementsSometimes 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 LinksFour 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:
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.
3.6.2. More Pseudo-Classes and -ElementsThe 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. :beforeThe :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. :afterExactly 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-childGoing 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.
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. :focusThe :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. |