From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/_colon_visited/index.html | 120 +++++++++++++++++++++++++++++ 1 file changed, 120 insertions(+) create mode 100644 files/es/web/css/_colon_visited/index.html (limited to 'files/es/web/css/_colon_visited') diff --git a/files/es/web/css/_colon_visited/index.html b/files/es/web/css/_colon_visited/index.html new file mode 100644 index 0000000000..3fa81d8ddc --- /dev/null +++ b/files/es/web/css/_colon_visited/index.html @@ -0,0 +1,120 @@ +--- +title: ':visited' +slug: 'Web/CSS/:visited' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:visited' +--- +
{{ CSSRef }}
+ +

La pseudo-clase :visited de CSS  representa enlaces que el usuario ya ha visitado. Por motivos de privacidad, los estilos que se pueden modificar con este selector son muy limitados.

+ +
/* Selecciona cualquier <a> que ha sido visitado */
+a:visited {
+  color: green;
+}
+ +

Los estilos definidos por la pseudo-clase :visited serán anulados por cualquier pseudo-clase posterior relacionada con el enlace ({{cssxref(":link")}}, {{cssxref(":hover")}} o {{cssxref(":active")}}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla :visited después de la regla :link pero antes de las reglas :hover y :active, según lo definido por el orden LVHA: :link — :visited — :hover — :active.

+ +

Restricciones de estilo

+ +

Por motivos de privacidad, los navegadores limitan estrictamente los estilos que puede aplicar utilizando esta pseudo-clase y cómo se pueden usar:

+ + + +
+

Nota: Para obtener más información sobre estas limitaciones y las razones detrás de ellas, vea Privacidad y el selector :visited.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Las propiedades que de otro modo no tendrían ningún color o serían transparentes no se pueden modificar con :visited. De las propiedades que se pueden establecer con esta pseudo-clase, su navegador probablemente solo tenga un valor predeterminado para color y column-rule-color. Por lo tanto, si desea modificar las otras propiedades, deberá darles un valor base fuera del selector :visited.

+ +

HTML

+ +
<a href="#test-visited-link">¿Ya has visitado este enlace?</a><br>
+<a href="">Ya has visitado este enlace.</a>
+ +

CSS

+ +
a {
+  /* Especifique los valores predeterminados no transparentes a ciertas propiedades,
+     lo que les permite ser diseñado con el estado :visited */
+  background-color: white;
+  border: 1px solid white;
+}
+
+a:visited {
+  background-color: yellow;
+  border-color: hotpink;
+  color: hotpink;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#link', ':visited') }}{{ Spec2('CSS4 Selectors') }}Ningún cambio.
{{ SpecName('CSS3 Selectors', '#link', ':visited') }}{{ Spec2('CSS3 Selectors') }}Ningún cambio.
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}{{ Spec2('CSS2.1') }}Levanta la restricción para aplicar  :visited solo al elemento {{ HTMLElement("a") }}. Permite a los navegadores restringir su comportamiento por razones de privacidad.
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}{{ Spec2('CSS1') }}Definición inicial.
+ +

Compatibilidad con navegadores

+ + + +

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

+ +

Ver también

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