menu horizontal

  • INDEX
  • CANVAS
  • CANVAS LAB
  • SVG
  • CSS3
  • ÚTILES
  • JS
⇪

w3.unpo<code>todo

  • chuletas
    • Propiedades CSS
    • Selectores CSS
    • Funciones CSS
    • Unidades CSS
    • Cascada y especificidad
  • selectores
    • Clases e identificadores
    • Seleccionar elementos
    • Atributos como selectores
    • El enésimo hijo
    • El primero, el último, el único
    • ::before y ::after
    • El selector :checked
    • El selector :target
    • El selector :empty
    • El selector :not()
    • El selector ::selection
    • Marcadores de posición
    • Primera letra, primera línea
    • :link, :visited, :hover y :active
    • Selectores para formularios
  • Funciones en CSS
    • Colores hex
    • Colores rgb y rgba
    • Colores hsl y hsla
    • Opacidad y transparencias
    • Gradientes lineales
    • Gradientes radiales
    • Transformaciones CSS
    • La función calc()
    • min() max() y clamp()
  • Reglas @at
    • La regla-at @import
    • La regla-at @namespace
    • La declaración @font-face
    • La regla-at @keyframes
    • @media-query
    • La regla-at @supports
  • Texto en el CSS
    • Cambio de línea
    • Texto con sombra
    • Sombras múltiples
    • La dirección del texto
    • Que son los Icon Fonts
    • La propiedad font
    • Propiedades del texto
    • La propiedad color
  • background
    • background
    • background-image
    • background-posicion
    • background-repeat
    • background-attachment
    • background-color
    • background-clip
    • background-origin
    • background-size
  • Border
    • La propiedad border
    • Esquinas redondeadas
    • La propiedad border-image
    • Bordes de tabla
  • Cajon de sastre
    • Modelo de caja
    • box-decoration-break
    • Cajas con sombra
    • La propiedad position
    • Recortar con clip-path
    • Márgenes colapsables
    • La propiedad shape-outside
    • La propiedad resize
    • La propiedad position:sticky
    • Prefijos ( vendor prefixes )
    • La propiedad cursor
  • cajas flexibles
    • Flexbox - una introducción
    • flex-direction
    • flex-wrap
    • align-items
    • justify-content
    • align-content
    • align-self
    • flex
    • order
    • Entender flexbox
    • Cómo utilizar Modernizr
    • Menú básico flexbox
    • Cuadricula flexbox
    • Maquetación flex
  • Grid layout
    • Propiedades del contenedor
    • grid-template y grid
    • Propiedades de los ítems
    • Algunas palabras clave
  • El layout de columnas
    • Columnas múltiples
    • Maquetación de tarjetas
  • Animaciones CSS3
    • Transiciones
    • Animaciones con @keyframes
    • @keyframes continuación
    • @keyframes y JavaScript
    • Elementos reversibles 3D
  • Filtros y modos de fusión
    • El módulo de filtros
    • Filtros CSS en SVG
    • Entender los filtros CSS3
    • Blending modes
    • Entender los modos de fusión
  • Laboratorio css
    • Tablas adaptativas
    • Dibujar formas geometricas
    • Bordes transparentes
    • Crear mascaras de texto
    • Casillas de verificación
    • Listas desplegables
    • Descripciones emergentes
    • Elementos <select> con estilo
    • Clasificación de 5 estrellas
    • Input type range
    • Input type range y javascript
    • Entender la propiedad display
  • Variables CSS
    • currentColor
    • Variables CSS - lo básico
    • Un caso práctico: botones
    • Otro caso práctico: sliders
    • Galería de imágenes css
  • CSS y JavaScript
    • CSS y JavaScript
    • Hojas de estilo y JavaScript
  • ejemplos
    • Ejemplo web adaptativo
    • Texto tridimensional
    • Galeria de imágenes ::checked
    • Fichas con pestañas
    • Paneles desplegables
    • Galeria de imágenes ::target
    • Ejemplo maquetación flex

:link, :visited, :hover y :active

facebook-svg gplus-svg twitter-svg

Las pseudo clases :link, :visited, :hover y :active son de las primeras pseudo clases implementadas en CSS.

La pseudo clase :link

La pseudo clase :link se utiliza para seleccionar y dar estilo a los enlaces que no fueron visitados. Importante: la pseudo clase :link selecciona solo a los elementos <a> que tienen un atributo href.

  <!-- :link selecciona este elemento -->
  <a href="http://w3.unpocodetodo.info">unpocodetodo.info</a>
  
  <!-- :link no selecciona este elemento -->
  <a>No hay atributo hrefe</a>

La pseudo clase ::visited

La pseudo clase ::visited se utiliza para seleccionar y dar estilo a los enlaces que ya fueron visitados.

a:visited {
      color:#0f0;
}

La pseudo clase ::hover

La pseudo clase ::hover se utiliza para seleccionar y dar estilo al pasar con el ratón por encima de un elemento, y se utiliza normalmente para enlaces <a> pero puede ser utilizada también para otros elementos. 

img:hover {
      transform: scale(1.5);
}

La pseudo clase :active

La pseudo clase :active especifica y selecciona un elemento activo, y se utiliza normalmente para enlaces <a> pero puede ser utilizada para otros elementos. Decimos que el elemento es activo cuando el usuario hace clic en este elemento pero antes de levantar el dedo del botón del ratón: o sea en "mousedown".

p:active {
   color: #f00;
}

Cuando utilizamos la pseudo clase :active  para un enlace, la utilizamos junto con :link, :visited, y :hover.

Hay que tener en cuenta que un elemento puede recibir estilos de dos pseudo clases a la vez: :visited y :active o :link y :active. Para no sobreescribir los estilos, cuando utilizamos las cuatro pseudo clases mencionadas arriba, normalmente las ponemos en el siguiente orden:


a:link {
      /* estilos  */
  }
a:visited {
      /* estilos */
  }
a:hover {
      /* estilos */
  }
a:active {
      /* estilos */
  }

Artículos relacionados

  • - Clases e identificadores
  • - Seleccionar elementos
  • - Atributos como selectores
  • - El enésimo hijo
  • - El primero, el último, el único
  • - ::before y ::after
  • - El selector :checked
  • - El selector :target
  • - El selector :empty
  • - El selector :not()
  • - El selector ::selection
  • - Marcadores de posición
  • - Primera letra, primera línea
  • - :link, :visited, :hover y :active
  • - Selectores para formularios

w3.unpo<code>todo.info utiliza una estructura generada con foundation