HTML and CSS Reference
In-Depth Information
::selection Pseudo-Element
CSS3 introduces a pseudo-element ::selection that is used to style parts of an element
that is currently selected or, as more commonly thought of, highlighted. The following
simple example demonstrates this pseudo-element:
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> ::selection Pseudo-elements </title>
<style type="text/css">
#select1::selection {background-color: red;}
#select1::-moz-selection {background-color: red;}
#select2::selection {color: green;}
#select2::-moz-selection {color: green;}
<p> Select <span id="select1"> this text </span> . Now select <span
id="select2"> this text </span> . </p>
N OTE Because of browser support with more emerging features, you may see CSS stem syntax; in
this case, -moz-selection is employed to improve the likelihood of rendering.
Table 4-8 summarizes all the pseudo-elements available in CSS1 through CSS3.
Pseudo-Class Selectors
Like pseudo-elements, pseudo-classes allow CSS selectors to specify styles for multiple
sections of a document tree that may not have style groups clearly associated with them.
Traditionally, pseudo-classes were dominantly used with link states and simple interface
states, but under CSS2 and CSS3, the number of pseudo-classes has exploded to include a
wide variety of document position and tree logic selectors. No doubt by the time you read
this there will be even more!
Search WWH ::

Custom Search