diff options
Diffstat (limited to 'files/pt-br/web/css/_colon_active/index.html')
| -rw-r--r-- | files/pt-br/web/css/_colon_active/index.html | 159 |
1 files changed, 159 insertions, 0 deletions
diff --git a/files/pt-br/web/css/_colon_active/index.html b/files/pt-br/web/css/_colon_active/index.html new file mode 100644 index 0000000000..5c929711bf --- /dev/null +++ b/files/pt-br/web/css/_colon_active/index.html @@ -0,0 +1,159 @@ +--- +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> |