Pseudoclases de estructura

3.1 Pseudoclase :first-child

Las pseudoclases de estructura en CSS permiten seleccionar y estilizar elementos basados en su posición en el árbol del documento. Esto es especialmente útil para crear estilos más precisos y detallados aplicados a ciertos elementos. Veamos las pseudoclases :first-child, :last-child, :nth-child y :nth-of-type.

La pseudoclase :first-child selecciona el primer elemento hijo de su padre. Esto es útil para estilizar el primer elemento en un grupo de elementos similares, como listas o párrafos.

Sintaxis:

    
      selector:first-child {
        propiedades: valores;
      }
    
  

Ejemplo de uso

En este ejemplo, el primer elemento de la lista está en negrita y de color rojo, y el primer párrafo dentro de un div se transforma a mayúsculas:

    
      /* Estiliza el primer elemento de una lista */

      li:first-child {
        font-weight: bold;
        color: red;
      }

      /* Estiliza el primer párrafo dentro de un div */

      div p:first-child {
        text-transform: uppercase;
      }
    
  

3.2 Pseudoclase :last-child

La pseudoclase :last-child selecciona el último elemento hijo de su padre. Se utiliza para estilizar el último elemento en un grupo de elementos similares.

Sintaxis:

    
      selector:last-child {
        propiedades: valores;
      }
    
  

Ejemplo de uso

En este ejemplo, el último elemento de la lista se presenta en cursiva y de color azul, y el último párrafo dentro de un div se subraya:

    
      /* Estiliza el último elemento de una lista */

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

      /* Estiliza el último párrafo dentro de un div */

      div p:last-child {
        text-decoration: underline;
      }
    
  

3.3 Pseudoclase :nth-child

La pseudoclase :nth-child permite seleccionar elementos según su posición en un grupo. Acepta un argumento que define qué elementos serán seleccionados. El argumento puede ser un número, una palabra clave o una expresión.

Sintaxis:

    
      selectornth-child(argumento) {
        propiedades: valores;
      }
    
  

Argumentos:

• Número: selecciona el elemento en la posición especificada
• Palabras clave: odd (impares) y even (pares)
• Expresión: formato an+b, donde a y b son números

Ejemplo 1: Selección de elementos impares

En este ejemplo se estilizan todos los elementos impares de la lista, dándoles un fondo gris claro:

    
      /* Estiliza los elementos impares de una lista */

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

Ejemplo 2: Selección de elementos en una posición específica

En este ejemplo, el tercer elemento de la lista se pone en negrita y de color verde:

    
      /* Estiliza el tercer elemento de una lista */

      li:nth-child(3) {
        font-weight: bold;
        color: green;
      }
    
  

Ejemplo 3: Uso de expresiones

En este ejemplo se estilizan cada segundo elemento, comenzando desde el primero, dándoles un fondo gris claro:

    
      /* Estiliza cada segundo elemento, comenzando desde el primero */

      li:nth-child(2n+1) {
        background-color: #e0e0e0;
      }
    
  

3.4 Pseudoclase :nth-of-type

La pseudoclase :nth-of-type es similar a :nth-child, pero selecciona elementos basados en su tipo entre los hijos de un mismo padre. Esto permite seleccionar tipos específicos de elementos, incluso si no son los primeros hijos de su padre.

Sintaxis:

    
      selector:nth-of-type(argumento) {
        propiedades: valores;
      }
    
  

Argumentos:

• Número: selecciona el elemento en la posición especificada entre los elementos del mismo tipo
• Palabras clave: odd (impares) y even (pares)
• Expresión: formato an+b, donde a y b son números

Ejemplo 1: Selección de párrafos pares

En este ejemplo se estilizan todos los párrafos pares, dándoles un fondo gris claro:

    
      /* Estiliza los párrafos pares */

      p:nth-of-type(even) {
        background-color: #d0d0d0;
      }
    
  

Ejemplo 2: Selección de elementos en una posición específica entre un tipo

En este ejemplo, el segundo encabezado h2 se hace más grande y se tiñe de color naranja:

    
      /* Estiliza el segundo encabezado h2 */

      h2:nth-of-type(2) {
        font-size: 2em;
        color: orange;
      }
    
  

Ejemplo 3: Uso de expresiones

En este ejemplo se estilizan cada tercer elemento de la lista, comenzando desde el segundo, dándoles un fondo gris claro:

    
      /* Estiliza cada tercer elemento de la lista, comenzando desde el segundo */

      li:nth-of-type(3n+2) {
        background-color: #c0c0c0;
      }