Pseudoclases de estado

2.1 Pseudoclase :hover

Las pseudoclases de estado permiten aplicar estilos a los elementos según su interacción con el usuario o su estado actual. Estas pseudoclases se usan a menudo para mejorar la interfaz de usuario, proporcionando retroalimentación visual a las acciones del usuario.

La pseudoclase :hover se aplica a un elemento cuando el usuario pasa el cursor del ratón sobre él.

Sintaxis:

    
      selector:hover {
        propiedades: valores;
      }
    
  

Ejemplo:

En este ejemplo, un enlace cambia de color y añade subrayado al pasar el cursor, y un botón cambia su color de fondo y texto.

    
      /* Estilo del enlace al pasar el cursor */

      a:hover {
        color: red;
        text-decoration: underline;
      }

      /* Estilo del botón al pasar el cursor */

      button:hover {
        background-color: #3498db;
        color: white;
      }
    
  

2.2 Pseudoclase :focus

La pseudoclase :focus se aplica a un elemento cuando recibe el foco, por ejemplo, al hacer clic en un elemento del formulario o al acceder a él con la tecla Tab.

Sintaxis:

    
      selector:focus {
        propiedades: valores;
      }
    
  

Ejemplo:

En este ejemplo, el campo de entrada cambia el color del borde y elimina el contorno al enfocarse, y un área de texto cambia su color de fondo.

    
      /* Estilo del campo de entrada al enfocarse */

      input:focus {
        border-color: blue;
        outline: none;
      }

      /* Estilo del área de texto al enfocarse */

      textarea:focus {
        background-color: #f0f0f0;
      }
    
  

2.3 Pseudoclase :active

La pseudoclase :active se aplica a un elemento en el momento de su activación por el usuario, por ejemplo, al presionar un botón del ratón. Esta pseudoclase a menudo se utiliza para proporcionar retroalimentación visual al presionar elementos de la interfaz.

Sintaxis:

    
      selector:active {
        propiedades: valores;
      }
    
  

Ejemplo:

En este ejemplo, un enlace cambia de color en el momento de presionarlo, y un botón cambia su color de fondo y se reduce un poco, creando un efecto de presión.

    
      /* Estilo del enlace en el momento de presionarlo */

      a:active {
        color: green;
      }

      /* Estilo del botón en el momento de presionarlo */

      button:active {
        background-color: #2980b9;
        transform: scale(0.98);
      }
    
  

2.4 Pseudoclase :visited

La pseudoclase :visited se aplica a los enlaces que el usuario ya ha visitado. Permite estilizar los enlaces visitados de manera diferente a los no visitados.

Sintaxis:

    
      selector:visited {
        propiedades: valores;
      }
    
  

Ejemplo

En este ejemplo, un enlace visitado cambia de color a púrpura para diferenciarse de los enlaces no visitados:

    
      /* Estilo del enlace visitado */

      a:visited {
        color: purple;
      }
    
  

2.5 Combinación de pseudoclases

Las pseudoclases de estado se pueden combinar para crear estilos interactivos complejos. Por ejemplo, se pueden definir diferentes estilos para los enlaces dependiendo de su estado.

Ejemplo de implementación completa

En este ejemplo, el estilo de los enlaces cambia dependiendo de su estado: estado básico, enlaces visitados, enlaces al pasar el cursor y enlaces en el momento de presionarlos:

    
      /* Estilo básico para enlaces */

      a {
        color: blue;
        text-decoration: none;
      }

      /* Estilo del enlace visitado */

      a:visited {
        color: purple;
      }

      /* Estilo del enlace al pasar el cursor */

      a:hover {
        color: red;
        text-decoration: underline;
      }

      /* Estilo del enlace en el momento de presionarlo */

      a:active {
        color: green;
      }