The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

46 Chapter 4

Figure 4-9 shows a comparison of the system-native ::selection colors

(top) and the colors I’ve applied with the ::selection pseudo-element

(bottom).

Figure 4-9: Custom colors applied with the ::selection pseudo-element

The ::selection pseudo-element is implemented in Chrome, Safari, and

IE9+ without a prefix, and in Firefox with the -moz- prefix—so despite it no

longer being part of the CSS3 specification, you can use it with confidence.

Summary

The new range of pseudo-classes (and any pseudo-elements that may be

defined in the future) makes document traversal far more flexible and pow-

erful with CSS3 than it ever was with its predecessors, and allows for much

leaner and more maintainable markup.

The increased number of pseudo-classes based on the state of UI and

form validation also gives users a much broader range of feedback, with-

out relying on JavaScript. This is exceptionally useful for HTML5, with its

increased focus on web applications.

DOM and Attribute Selectors: Browser Support

Chrome firefox safari ie

Structural pseudo-classes Yes Yes Yes Yes

:target Yes Yes Yes Yes

:empty Yes Yes Yes Yes

:root Yes Yes Yes Yes

:not() Yes Yes Yes Yes

Pseudo-elements (:: syntax) Yes Yes Yes Yes

UI element states Yes Yes Yes Yes

Constraint validation Yes Yes Yes IE10*

::selection Yes Yes Yes Yes

* Does not support :in-range, :out-of-range