HTML, XHTML, and CSS Bible, Fifth Edition

Appendix E. Pseudo-Elements and Pseudo-Classes Quick Reference

IN THIS APPENDIX

• Pseudo-Elements

• Pseudo-Classes

CSS selectors are designed to match HTML elements that are in a static state. Occasionally, however, you will want to match pieces of a document that cannot be clearly delimited by HTML entities, or match elements that are in a particular phase of a dynamic state. For these purposes, pseudo-elements and pseudo-classes exist.

Pseudo-elements provide the means to match certain parts of a document that aren't delimited by standard elements—the first line or first letter of an element's content, for example.

Pseudo-classes provide the means to match elements that are in a certain state—being the first child of a parent element, having the mouse hovering over the element, and so on.

Both pseudo-elements and pseudo-classes have the same format: a colon followed by a keyword that is appended to the end of a selector. For example, the following selector will select the first line of all h1 elements:

h1:first-line { properties }

The following sections provide a quick reference for pseudo-elements and pseudo-classes.

Note

The pseudo-elements and pseudo-classes covered in this appendix are implemented in almost all modern browsers. Exceptions are the before and after pseudo-elements, which are not yet supported in Internet Explorer (as of version 7.0), and the lang pseudo-class, which is supported only in Internet Explorer for the Mac. The World Wide Web Consortium (W3C) has suggested many ...