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>
<html>
<head>
<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;}
</style>
</head>
<body>
<p>
Select
<span id="select1">
this text
</span>
. Now select
<span
id="select2">
this text
</span>
.
</p>
</body>
</html>
O
NLINE
http://htmlref.com/ch4/selection.html
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!
