Nesting
Nesting para enlazar varios selectoresAnidamiento de reglas

Flex >>

El término de Nesting podemos decir que es código CSS anidado, teniendo bloques de código unos dentro de otro y facilitando al programador el mantenimiento del nesting al ser mucho más intuitivo. Veamos un ejemplo, con un header de una web, donde los estilos del header serán aplicados a todos los hijos de .header

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. Vamos a ir poco a poco aprendiendo su sintaxis ya que será la misma que usaremos en Sass. 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.

  • Cuando enlazamos varios selectores juntos o con pseudoclase (:hover, :checked, :visited, :not()...)
  • Por compatibilidad con navegadores antiguos...
  • Para facilitar la legibilidad...

Nesting para enlazar varios selectores

.a {
  /* Estilos para los elementos con class="a" */
  .b {
    /* Estilos para elementos con class="b" which que son descendientes de class="a" */
  }
  &.b {
    /* Estilos para los elementos que tienen las class="a b" */
  }
  &:hover{
    /* Estilos para los elementos .a:hover */
  }
}
<main class="notices">
      <article class="notice">
        <h2 class="notice-heading">Notice</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      </article>
      <article class="notice warning">
        <h2 class="warning-heading">Warning</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      </article>
      <article class="notice success">
        <h2 class="success-heading">Success</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      </article>
    </main>

Otro ejemplo donde debemos usar el & es cuando queremos seleccionar aquellos elementos que contengan al padre, es decir:

.container {
  /* Estilos para .container */
  .item & {
    /* Estilos para .item .container */
  }
  .item & .item & { /* Estilos para .item .container .item .container */ }
  :is(.page, .menu) & { /* Estilos para .page .container, .menu .container */ }
  :not(&) { /* Estilo para :not(.container) */} 
}

Anidamiento de reglas

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

.foo {
  display: grid;
  @media (orientation: landscape) {
    grid-auto-flow: column;
  }
}

Flex >>