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_visited/index.html | 154 ++++++++++++++++++++++++++ 1 file changed, 154 insertions(+) create mode 100644 files/pt-br/web/css/_colon_visited/index.html (limited to 'files/pt-br/web/css/_colon_visited/index.html') diff --git a/files/pt-br/web/css/_colon_visited/index.html b/files/pt-br/web/css/_colon_visited/index.html new file mode 100644 index 0000000000..501db9fcf6 --- /dev/null +++ b/files/pt-br/web/css/_colon_visited/index.html @@ -0,0 +1,154 @@ +--- +title: ':visited' +slug: 'Web/CSS/:visited' +tags: + - CSS + - Layout + - Pseudo-classes + - Web +translation_of: 'Web/CSS/:visited' +--- +
{{ CSSRef }}
+ +

O :visited é uma Pseudo-classe do CSS para indicar se o link em questão já foi visitado pelo usuário. Por questões de privacidade, os styles que podem ser modificados usando este seletor são muito limitados.

+ +
/* Seleciona qualquer <a> que poderá ser visitado */
+a:visited {
+  color: green;
+}
+ +

Styles definidos pela pseudo-classe :visited vão ser substituidos por qualquer pseudo-classe relacionada ao link subsequente ({{cssxref(":link")}}, {{cssxref(":hover")}}, ou {{cssxref(":active")}}) que tenha ao menos uma especificação igual. Para estilizar links apropriadamente, garantindo assim seu funcionamento adequado, ponha a regra :visited depois da regra :link mas antes das regras :hover e :active , Pode-se definir pela ordem LVHA: :link — :visited — :hover — :active.

+ +

Restrições de Estilo

+ +

Por razões de privacidade, navegadores limitam estritamente quais estilos você pode aplicar usando esta pseudo-class, como elas podem ser usadas:

+ + + +
+

Nota: Para mais informações quanto a essas limitações e as razões por trás delas, veja Privacy and the :visited selector. Obs: No momento estará apenas disponível em inglês.

+
+ +

Syntaxe

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <title>Exemplo de uso do seletor :visited</title>
+    <style type="text/css">
+        a {
+            background-color: white;
+            border: 1px solid white; }
+        a:visited {
+            background-color: lightblue;
+            border-color: cyan;
+            color: darkblue; }
+    </style>
+</head>
+<body>
+    <a href="">Você já visitou este link?</a><br>
+    <a href="">Você já visitou este link.</a>
+</body>
+</html>
+ +

Exemplo

+ +

Propriedades que de alguma forma não tenha cor ("color") definida, ou seja transparente, não podem ser modificadas como o :visited. Das  propriedades que podem ser definidas por essa pseudo-classe, seu navegador provavelmente terá por padão valores para color e column-rule-color somente. Portanto, se você quiser modificar outras propriedades, você necessitará pré-definir os valores fora do seletor :visited.

+ +

HTML

+ +
<a href="#">Você já visitou este link?</a>
+<br>
+<a href="">Você já visitou este link.</a>
+ +

CSS

+ +
a {
+  /* Specifica non-transparent por padrão para algumas
+     propriedades, permitindo-os a serem estilizados pelo
+     estado :visited */
+  background-color: white;
+  border: 1px solid white;
+}
+
+a:visited {
+  background-color: yellow;
+  border-color: hotpink;
+  color: hotpink;
+}
+
+ +

Resultado

+ +
{{EmbedLiveSample("Exemplo")}}
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentário
{{ SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#link', ':visited') }}{{ Spec2('CSS4 Selectors') }}Sem mudança.
{{ SpecName('CSS3 Selectors', '#link', ':visited') }}{{ Spec2('CSS3 Selectors') }}Sem mudança.
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}{{ Spec2('CSS2.1') }}Eleva a restrição para aplicar apenas :visited ao elemento {{HTMLElement ("a")}}. Permite que os navegadores restrinjam seu comportamento por motivos de privacidade.
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}{{ Spec2('CSS1') }}Definição inicial.
+ +

Compatibilidade com Navegadores

+ + + + + +

{{Compat("css.selectors.visited")}}

+ +

Veja também (inglês)

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