Selector de nesting de CSS (&)

Definición y uso

Nesting de CSS (&) El selector se utiliza para aplicar estilos a un elemento en el contexto de otro elemento.

La nesting reduce la necesidad de repetir selectores para elementos relacionados.

Ejemplo

Ejemplo 1

Antes de la nesting, debe declarar explícitamente cada selector por separado, como se muestra a continuación:

.box {
  borde: 2px sólido verde;
  colorfondo: beige;
  familiafuente: monoespaciada;
  tamañoletra: 20px;
}
.box > a {
  color: verde;
}
.box > a:hover {
  color: blanco;
  colorfondo: salmón;
}

Pruebe usted mismo

Ejemplo 2

Después de la nesting, el selector se extiende y las reglas de estilo relacionadas se agrupan dentro de la regla padre:

.box {
  borde: 2px sólido verde;
  colorfondo: beige;
  familiafuente: monoespaciada;
  tamañoletra: 20px;
  & > a {
    color: verde;
    &:hover {
      color: blanco;
      colorfondo: salmón;
    }
  }
}

Pruebe usted mismo

Consejo:Si el estilo de .box en el ejemplo anterior debe eliminarse de su proyecto, puede eliminar todo el grupo sin buscar los selectores relacionados.

Sintaxis de CSS

regla padre {
  declaraciones css;
  & reglahijo {
    declaraciones css;  } 
}

Detalles técnicos

Soporte del navegador