---
title: ':active'
slug: 'Web/CSS/:active'
translation_of: 'Web/CSS/:active'
---
<div>{{CSSRef}}</div>

<div></div>

<div>A pseudo-classe css &lt;strong&gt; :active &lt;/strong&gt;</div>

<p>Esse estilo pode ser substituído por qualquer outra pseudo-classe relacionada ao link, ou seja, {{cssxref(":link")}}, {{cssxref(":hover")}} e {{cssxref(":visited")}}, aparecendo nas regras subseqüentes. Para estilizar apropriadamente os links, você precisa colocar a regra  <code>:active </code>depois de todas as outras regras relacionadas ao link, conforme definido pela ordem LVHA. <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>

<div class="note"><strong>Nota:</strong> Em sistemas com mouses com vários botões, o CSS 3 especifica que a pseudo-classe :active só deve ser aplicada ao botão principal em mouses destros, este é tipicamente o botão mais à esquerda.</div>

<h2 id="Example" name="Example">Exemplo</h2>

<div id="example">
<h3 id="HTML">HTML</h3>

<pre class="brush: html; highlight:[3]">&lt;body&gt;
    &lt;h1&gt;:active CSS selector example&lt;/h1&gt;
    &lt;p&gt;The following link will turn lime during the time you click it and release the click: &lt;a href="#"&gt;Mozilla Developer Network&lt;/a&gt;.&lt;/p&gt;
&lt;/body&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css; highlight:[5]">body { background-color: #ffffc9 }
a:link { color: blue } /* links não visitados */
a:visited { color: purple } /* links visitados */
a:hover { <span class="st">font-weight: bold</span> } /* user hovers */
a:active { color: lime } /* links ativos */</pre>
</div>

<div>{{EmbedLiveSample('example',600,140)}}</div>

<h2 id="Especificações"><span>Especificações</span></h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td>
   <td>{{Spec2('CSS4 Selectors')}}</td>
   <td>
    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
    <div><span id="ouHighlight__0_1TO0_6">Nenhuma</span><span id="noHighlight_0.6883987804935804"> </span><span id="ouHighlight__3_8TO8_14">mudança</span><span id="noHighlight_0.5335362648221555">.</span></div>
    </div>
   </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td>
    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
    <div><span id="ouHighlight__0_1TO0_6">Nenhuma</span><span id="noHighlight_0.6883987804935804"> </span><span id="ouHighlight__3_8TO8_14">mudança</span><span id="noHighlight_0.5335362648221555">.</span></div>
    </div>
   </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>
    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
    <div><span id="ouHighlight__0_1TO0_6">Nenhuma</span><span id="noHighlight_0.6883987804935804"> </span><span id="ouHighlight__3_8TO8_14">mudança</span><span id="noHighlight_0.5335362648221555">.</span></div>
    </div>
   </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>
    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
    <div><span id="ouHighlight__8_17TO0_8">Definição</span><span id="noHighlight_0.9831647105645616"> </span><span id="ouHighlight__0_6TO10_16">inicial</span><span id="noHighlight_0.3416173095780455">.</span></div>
    </div>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Recurso</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Support on the <code>&lt;a&gt;</code> element</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>4.0</td>
   <td>5.0</td>
   <td>1.0</td>
  </tr>
  <tr>
   <td>Support on any element</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>8.0</td>
   <td>7.0</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Support on the <code>&lt;a&gt;</code> element</td>
   <td>1.0</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>6.0</td>
   <td>6.0</td>
   <td>1.0</td>
  </tr>
  <tr>
   <td>Support on any element</td>
   <td>1.0</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}} [1]</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] By default, Safari Mobile does not use the {{cssxref(":active")}} state unless there is a <a href="/en-US/docs/Web/Reference/Events/touchstart"><code>touchstart</code></a> event handler on the relevant element or on the {{HTMLElement("body")}}.</p>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li>Link-related pseudo-classes: {{cssxref(":link")}}, {{cssxref(":visited")}}, and {{cssxref(":hover")}}.</li>
</ul>