<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>:focus with ::selection</title>
  <style type="text/css"><![CDATA[
  textarea { border: solid thick gray; }
  textarea:focus { border: solid thick green; }
  textarea::selection { background: silver; color: black; }
  textarea:focus::selection { background: lime; color: black; }
]]></style>
  <link rel="first" href="css3-modsel-1.xml" title="Groups of selectors"/>
  <link rel="prev" href="css3-modsel-163.xml" title="Contextual :contains"/>
  <link rel="next" href="css3-modsel-165.xml" title=":hover with ::selection"/>
  <link rel="last" href="css3-modsel-d4.xml" title="Dynamic updating of :first-child and :last-child"/>
  <link rel="up" href="./index.html"/>
  <link rel="top" href="../../index.html"/>
 </head>
 <body>
   <p><textarea rows="5" cols="70">Select some of this text, then change the focus around. While this
text is focussed, the selection should be green. While the focus is
elsewhere, the selection should be silver. The border should at all
times be a darker colour than the selection&#39;s background. Repeat the
test with everything selected.</textarea></p>

</body>
</html>