Anidamiento CSS nativo: el selector &, soporte de navegadores y diferencias con Sass

El anidamiento CSS permite escribir reglas dentro de otras reglas, para mantener juntos los estilos que van juntos. Durante años esto solo era posible con un preprocesador como Sass. Ahora es una función nativa de CSS, disponible en todos los navegadores modernos — sin paso de compilación.

La idea básica

En lugar de repetir el selector padre para cada hijo, se anida la regla hija dentro. Estos dos bloques producen el mismo resultado:

/* CSS plano, tradicional */
.card { padding: 1rem; }
.card h2 { margin: 0; }
.card p { color: #555; }

/* Anidado */
.card {
  padding: 1rem;
  h2 { margin: 0; }
  p { color: #555; }
}

Cada selector anidado se lee relativo a su padre, así que .card p es lo que el navegador aplica realmente.

El selector de anidamiento &

El ampersand & se refiere al selector padre. Es necesario siempre que el selector anidado deba unirse directamente al padre en vez de describir un descendiente — pseudoclases, clases modificadoras y selectores compuestos:

.btn {
  background: #2563eb;

  &:hover { background: #1d4ed8; }   /* .btn:hover */
  &.is-active { background: #1e40af; } /* .btn.is-active */
}

Sin el &, un simple :hover se trataría como descendiente: .btn *:hover, que casi nunca es lo que se busca. Cuando un selector anidado empieza por un elemento o una clase (como p arriba), el navegador inserta por ti un combinador de descendencia implícito.

Anidar media queries

Puedes anidar @media (y otras at-rules) dentro de un selector, manteniendo los ajustes responsive junto a la regla que modifican:

.sidebar {
  width: 100%;

  @media (min-width: 768px) {
    width: 280px;
  }
}

En qué se diferencia de Sass

La sintaxis se parece a Sass, pero no son idénticas. Las diferencias que más sorprenden:

• Concatenación: Sass permite construir selectores como &__title (BEM). El anidamiento nativo CSS no concatena — &__title es inválido. Hay que escribir el nombre de clase completo.
• Sin compilación: el anidamiento nativo se ejecuta en el navegador, así que no hay nada que compilar ni source maps que gestionar.
• Especificidad de &: en CSS nativo, & se comporta como :is() y toma la especificidad del selector más específico de la lista padre, lo que puede diferir sutilmente de la salida de Sass.

Soporte de navegadores y alternativa

El anidamiento CSS nativo está soportado en las versiones actuales de Chrome, Edge, Firefox y Safari. Las primeras implementaciones exigían que el selector anidado empezara por un símbolo (se escribía & p en vez de p); la sintaxis relajada que permite un selector de elemento desnudo es la de los navegadores actuales. Si necesitas soportar motores más antiguos, sigue con Sass o PostCSS — el plugin postcss-nesting compila el anidamiento nativo a CSS plano.

Referencia rápida

Quieres	Escribe
Descendiente	.card { p { ... } }
Pseudoclase	&:hover { ... }
Clase modificadora	&.is-active { ... }
Responsive	@media (...) { ... } anidado
Concatenación BEM	no soportada — escribe la clase completa

El anidamiento nativo elimina una de las últimas grandes razones para recurrir a un preprocesador en un proyecto nuevo. Mantén el anidamiento poco profundo — dos o tres niveles — y tus hojas de estilo siguen siendo legibles mientras las relaciones entre selectores se mantienen evidentes.