title: Confused by CSS pseudo-class :active
body: <p>I was looking <a href="http://www.w3schools.com/css/sel_active.asp" rel="nofollow noreferrer">here</a> at CSS :active Selector.</p>
  <blockquote>
  <p>The :active selector styles links to
  active pages</p>
  </blockquote>
  <p>That got me thinking, what the heck is an 'active page' in HTML/CSS terminology...</p>
  <p>At this point I went to the <a href="http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes" rel="nofollow noreferrer">w3docs</a> Section : 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus.</p>
  <blockquote>
  <p>The :active pseudo-class applies while
  an element is being activated by the
  user. For example, between the times
  the user presses the mouse button and
  releases it.</p>
  </blockquote>
  <p>So I used one of the <a href="http://www.w3schools.com/CSS/tryit.asp?filename=trycss_sel_active" rel="nofollow noreferrer">w3shools try it pages</a> and hack together an example, substituting the following code, which you can just cut &amp; paste and try.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type=&quot;text/css&quot;&gt;
  :focus,:active
  {
  outline-offset: 10px;
  outline: solid;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;p&gt;Click the links to see the background color become yellow:&lt;/p&gt;
  &lt;a href=&quot;http://www.w3schools.com&quot;&gt;w3schools.com&lt;/a&gt;
  &lt;a href=&quot;http://www.wikipedia.org&quot;&gt;wikipedia.org&lt;/a&gt;
  &lt;button type=&quot;button&quot;&gt;Click Me!&lt;/button&gt;
  &lt;form&gt;
  &lt;input type=&quot;text&quot;/&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>The form field works for :focus. But the button or links don't work for :active.</p>
  <p>Why is that? Is there something about 'active page' I'm not understanding that w3schools talked about.</p>
  <p>I saw this <a href="http://www.mstudiostalk.com/2008/03/11/pure-css-to-display-the-active-page-in-the-navigation/" rel="nofollow noreferrer">nice tip</a> when Googling for it, but I don't think it's related.</p>