--- title: ':active' slug: 'Web/CSS/:active' translation_of: 'Web/CSS/:active' --- <div>{{CSSRef}}</div> <div></div> <div>A pseudo-classe css <strong> :active </strong></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]"><body> <h1>:active CSS selector example</h1> <p>The following link will turn lime during the time you click it and release the click: <a href="#">Mozilla Developer Network</a>.</p> </body></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="Compatibilidade_do_navegador">Compatibilidade do navegador</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><a></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><a></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>