Nesting

Flex >>

El CSS nesting (anidamiento de CSS) es una característica nativa de CSS que te permite anidar un selector de estilo dentro de otro, con el selector hijo siendo relativo al selector padre. 

Te permite escribir reglas CSS de una manera más concisa y jerárquica, imitando la estructura de tu HTML. Antes solo era posible con preprocesadores como Sass o Less, pero ahora es parte del estándar CSS

Anidamiento de Descendientes (Child/Descendant Nesting)

Cuando anidas un selector de clase o elemento, el navegador asume un combinador de descendiente (un espacio) entre el selector padre y el hijo.

Veamos un ejemplo, con un header de una web, donde los estilos del header serán aplicados a todos los hijos de .header

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
header{
    background-color: azure;
    height: 10vh;
    font-size: 3vh;
    text-align: center;
    nav{
        display: flex;
        gap: 10px 50px;
        justify-content: center;
    }
}

Mediante este ejemplo, podemos ver que los estilos de nav están dentro de los estilos del header haciendo que el código quede más claro y más organizado. En el ejemplo anterior estamos anidando nav como si empleáramos el selector .header nav

La sintaxis más sencilla es la que hemos visto antes, pero hay casos donde si no utilizamos el selector & este anidamiento no funciona.

Uso del Símbolo & (Selector de Anidamiento)

El símbolo & (ampersand o "y") es el selector de anidamiento y se utiliza para referenciar el selector padre de forma explícita. Esto es necesario para:

  • Pseudo-clases (:hover, :focus, etc). Antiguo button:hover
  • Pseudo-elementos (::before, ::after, etc)
  • Combinar selectores directamente sin espacio (selectores compuestos). Se usa para unir selectores sin espacio entre ellos, aplicando estilos a un elemento que cumple con múltiples condiciones.
  • Combinadores diferentes al descendiente: El anidamiento por defecto usa el combinador de descendiente (un espacio). Usar & te permite usar otros combinadores directamente, como el hermano adyacente (+) o el hijo directo (>).
  • Cambiar el orden del padre (prepending): Se usa para colocar el selector padre en el medio o al final de la regla, en lugar de al principio, lo cual es útil para aplicar estilos basados en un contenedor superior.

Nesting para enlazar varios selectores

Pseudo-clases: Cambiando el estilo de un botón al pasar el ratón por encima. Este es uno de los usos más comunes. El & se combina con una pseudo-clase como :hover para aplicar estilos cuando el elemento padre (en este caso, el botón) está en ese estado.

<button class="mi-boton">Pasa el ratón por encima</button>

Pseudo-elementos (::before): Aquí, el & se usa para añadir un pseudo-elemento ::before a la lista, creando un marcador de estilo personalizado.

<main>
    <ul class="lista-custom">
        <li>Primer elemento</li>
        <li>Segundo elemento</li>
        <li>Tercer elemento</li>
    </ul>
</main>

Combinar selectores sin espacio (selectores compuestos): Este ejemplo muestra cómo el & puede unir una clase con otra (.btn-rojo.activo) para aplicar un estilo solo cuando ambas clases están en el mismo elemento.

<button class="btn-rojo">Normal</button>
<button class="btn-rojo activo">Activo</button>

Combinadores diferentes al descendiente(>): Por defecto, el anidamiento crea un selector descendiente (espacio). Con &, podemos especificar un combinador diferente, como el hijo directo (>), para que el estilo solo afecte a los p que son hijos inmediatos del div.

<div class="card">
    <p>Este párrafo es un hijo directo y se pondrá en negrita.</p>
    <div>
        <p>Este párrafo NO es un hijo directo, es nieto. No se verá afectado.</p>
    </div>
</div>

Cambiar el dorden del padre (prepending): Este es un caso avanzado y muy potente. Aquí, el & se coloca después de otro selector. Esto invierte el orden y permite estilizar el elemento padre (.articulo) solo cuando está dentro de un contenedor específico (.modo-oscuro).

<div class="articulo">
  <p>Este artículo tiene un estilo normal.</p>
</div>

<div class="modo-oscuro">
  <div class="articulo">
    <p>Este artículo está dentro del modo oscuro y cambia su apariencia.</p>
  </div>
</div>

Anidamiento de reglas

Es posible anidar reglas (@media, @supports, @layer, @scope, @container) css dentro de bloques CSS con nesting.

.perfil {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid #ddd;

  img {
    margin-right: 15px;
  }
  
  /*
   * En pantallas de 600px o menos, cambiamos la disposición.
   * El & interior hace referencia al selector padre .perfil,
   * manteniendo el contexto.
   */
  @media (max-width: 600px) {
    & {
      flex-direction: column;
      text-align: center;
    }
    
    & img {
      margin-right: 0;
      margin-bottom: 10px;
    }
  }
}

Beneficios del CSS Nesting

  • Legibilidad y Organización: Agrupa los estilos relacionados en un solo bloque, reflejando visualmente la estructura del HTML. Es mucho más fácil ver qué estilos pertenecen a un componente específico.
  • Menos Repetición: Eliminas la necesidad de escribir repetidamente el selector padre (.card) para seleccionar a sus hijos (.card .title, .card .content).
  • Mantenibilidad: Si el selector padre cambia (ej. de .card a .product-box), solo tienes que actualizarlo en un lugar en lugar de en múltiples líneas de código.
  • Menor Tamaño de Archivo: Al reducir la repetición de selectores en el código fuente, los archivos CSS son potencialmente más pequeños

Flex >>