Pseudoclases

7.1 Pseudoclases de estado

Las pseudoclases en CSS son palabras clave especiales que se añaden a los selectores para indicar el estado de un elemento o su posición en la estructura del documento. Permiten aplicar estilos a elementos en ciertos estados o situaciones que no se pueden especificar con selectores normales.

Pseudoclases principales:

• Pseudoclases de estado
• Pseudoclases de estado estructural
• Pseudoclases de forma
• Pseudoclases de navegación

Sintaxis:

    
      selector:pseudoclase {
        propiedad: valor;
        propiedad: valor;
      }
    
  

Pseudoclases de estado

Estas pseudoclases se utilizan para dar estilo a elementos dependiendo de su estado actual, por ejemplo, al pasar el cursor o un elemento activo:

• :hover — se aplica cuando el usuario pasa el cursor sobre un elemento
• :active — se aplica cuando un elemento es activado (normalmente al hacer clic)
• :focus — se aplica cuando un elemento está enfocado (por ejemplo, al usar el teclado)
• :visited — se aplica a los enlaces visitados
• :link — se aplica a los enlaces no visitados

7.2 Pseudoclase hover

La pseudoclase :hover se aplica a un elemento cuando el usuario pasa el cursor del ratón sobre él. Es comúnmente usada para cambiar el aspecto de enlaces y botones al pasar el cursor.

Sintaxis:

    
      selector:hover {
        propiedad: valor;
        propiedad: valor;
      }
    
  

Ejemplo:

Este selector cambia el color del texto y subraya los enlaces al pasar el cursor del ratón.

    
      <a href="#">Enlace-placeholder</a>
    
  

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

Aplicación:

• Mejora la interacción con el usuario (UI) mediante retroalimentación visual
• Se utiliza para botones, enlaces y otros elementos interactivos

7.3 Pseudoclase focus

La pseudoclase :focus se aplica a un elemento cuando recibe el foco. Por ejemplo, al hacer clic en él o al navegar a él con la tecla tabulador. Se usa comúnmente para inputs y otros elementos de formulario.

Sintaxis:

    
      selector:focus {
        propiedad: valor;
        propiedad: valor;
      }
    
  

Ejemplo:

Este selector cambia el color del borde del input y elimina el contorno al recibir el foco.

    
      <input type="text" name="text" id="text">
    
  

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

Aplicación:

• Mejora la accesibilidad (accessibility) de las páginas web
• Hace que los elementos interactivos sean más visibles cuando están enfocados

7.4 Pseudoclase nth-child

La pseudoclase :nth-child se aplica a elementos basándose en su posición entre los elementos hijos del padre. Acepta un argumento que puede ser un número, una palabra clave o una expresión.

Sintaxis:

    
      selector:nth-child(n) {
        propiedad: valor;
        propiedad: valor;
      }
    
  

Ejemplo:

Este selector permite aplicar estilos a elementos basándose en su posición entre sus hermanos.

    
      <ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
        <li>Elemento 3</li>
        <li>Elemento 4</li>
        <li>Elemento 5</li>
        <li>Elemento 6</li>
        <li>Elemento 7</li>
      </ul>
    
  

    
      /* Aplica estilos a todos los elementos hijos impares */
      li:nth-child(odd) {
          background-color: lightgray;
      }

      /* Aplica estilos a todos los elementos hijos pares */
      li:nth-child(even) {
          background-color: lightblue;
      }

      /* Aplica estilos al segundo elemento hijo */
      li:nth-child(2) {
          color: red;
      }
    
  

Aplicación:

• Estiliza filas de tablas, elementos de listas y otras estructuras repetitivas
• Permite crear diseños y estilos complejos sin añadir clases adicionales

7.5 Ejemplos de uso de pseudoclases

    
      <button type="button">Botón</button>
    
  

    
      button:hover, button:focus {
        background-color: darkblue;
        color: white;
      }
    
  

Estilización de filas pares de una tabla:

    
      <table>
        <tr>
          <th>Nombre</th>
          <th>Cantidad</th>
          <th>Precio</th>
        </tr>
        <tr>
          <td>Producto 1</td>
          <td>5</td>
          <td>10 €</td>
        </tr>
        <tr>
          <td>Producto 2</td>
          <td>3</td>
          <td>15 €</td>
        </tr>
        <tr>
          <td>Producto 3</td>
          <td>8</td>
          <td>7 €</td>
        </tr>
      </table>
    
  

    
      tr:nth-child(even) {
        background-color: #f2f2f2;
      }
    
  

Exclusión de ciertos elementos del estilo general:

    
      <ul>
        <li class="list-item">Elemento 1</li>
        <li class="list-item">Elemento 2</li>
        <li class="list-item">Elemento 3</li>
        <li class="list-item">Elemento 4</li>
        <li class="list-item">Elemento 5</li>
        <li class="list-item">Elemento 6</li>
        <li class="list-item">Elemento 7</li>
      </ul>
    
  

    
      .list-item:not(:last-child) {
        border-bottom: 1px solid #ddd;
      }