Introducción a los pseudoclases

1.1 Pseudoclases

Las pseudoclases en CSS son palabras clave especiales que se añaden a los selectores para indicar su estado o posición en el árbol del documento. Permiten estilizar elementos basándose en su estado o relación con otros elementos sin necesidad de añadir clases o identificadores en el código HTML.

Conceptos básicos de las pseudoclases

1. Definición del estado del elemento:
   • Las pseudoclases pueden indicar el estado de un elemento, como cuando el ratón pasa por encima, el foco o la activación
2. Definición de la posición del elemento:
   • Las pseudoclases pueden indicar la posición del elemento respecto a su elemento padre u otros elementos, como el primer o último elemento
3. Casos especiales y grupos lógicos:
   • Las pseudoclases también pueden definir casos especiales, como el primer elemento de un tipo o elemento impar/par

Cómo usar las pseudoclases

Las pseudoclases se añaden al selector usando dos puntos (:). Pueden ser usadas con selectores de elementos, así como con clases, identificadores y otros selectores.

Sintaxis:

    
      selector:pseudoclase {
        propiedades: valores;
      }
    
  

Ejemplos de uso

1. Selector de elemento con pseudoclase

En este ejemplo, todos los primeros párrafos (<p>) dentro de sus elementos padres serán en negrita:

    
      p:first-of-type {
        font-weight: bold;
      }
    
  

2. Selector de clase con pseudoclase

En este ejemplo, el fondo de todos los elementos con la clase .button se volverá azul al pasar el cursor:

    
      .button:hover {
        background-color: blue;
      }
    
  

3. Selectores combinados con pseudoclases

En este ejemplo, todos los párrafos pares (<p>) dentro de los elementos con la clase .container serán rojos:

    
      .container > p:nth-child(2n) {
          color: red;
      }
    
  

1.2 Ejemplos de pseudoclases y su aplicación

1. Pseudoclases que definen estado

Las pseudoclases que definen el estado de un elemento permiten cambiar su estilo según la interacción del usuario o el estado del elemento.

    
      a:link {
        color: blue;
      }

      a:visited {
        color: purple;
      }

      a:hover {
        color: red;
      }

      a:active {
        color: green;
      }
    
  

2. Pseudoclases que definen posición

Las pseudoclases que definen la posición del elemento permiten aplicar estilos a los elementos según su ubicación en la estructura DOM.

    
      li:first-child {
          font-style: italic;
      }

      li:last-child {
          font-style: italic;
      }

      li:nth-child(odd) {
          background-color: #f0f0f0;
      }

      li:nth-child(even) {
          background-color: #ffffff;
      }
    
  

3. Pseudoclases para grupos lógicos

Estas pseudoclases permiten estilizar elementos basados en sus grupos lógicos o tipos.

    
      input:checked {
        background-color: yellow;
      }

      input:disabled {
        background-color: grey;
      }

      input:enabled {
        background-color: white;
      }