From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/_colon_active/index.html | 159 +++++++++++++++++++++++++++ 1 file changed, 159 insertions(+) create mode 100644 files/pt-br/web/css/_colon_active/index.html (limited to 'files/pt-br/web/css/_colon_active') 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' +--- +
{{CSSRef}}
+ +
+ +
A pseudo-classe css <strong> :active </strong>
+ +

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  :active depois de todas as outras regras relacionadas ao link, conforme definido pela ordem LVHA. :link — :visited — :hover — :active.

+ +
Nota: 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.
+ +

Exemplo

+ +
+

HTML

+ +
<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>
+ +

CSS

+ +
body { background-color: #ffffc9 }
+a:link { color: blue } /* links não visitados */
+a:visited { color: purple } /* links visitados */
+a:hover { font-weight: bold } /* user hovers */
+a:active { color: lime } /* links ativos */
+
+ +
{{EmbedLiveSample('example',600,140)}}
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}} +
+
Nenhuma mudança.
+
+
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}} +
+
Nenhuma mudança.
+
+
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}} +
+
Nenhuma mudança.
+
+
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}} +
+
Definição inicial.
+
+
+ +

Compatibilidade do navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support on the <a> element1.0{{CompatGeckoDesktop("1.0")}}4.05.01.0
Support on any element1.0{{CompatGeckoDesktop("1.0")}}8.07.0{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support on the <a> element1.0{{CompatGeckoMobile("1.0")}}6.06.01.0
Support on any element1.0{{CompatGeckoMobile("1.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}} [1]
+
+ +

[1] By default, Safari Mobile does not use the {{cssxref(":active")}} state unless there is a touchstart event handler on the relevant element or on the {{HTMLElement("body")}}.

+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf