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

Get HTML, XHTML, and CSS Bible, Fifth Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.