Seletor de Nesting CSS (&)

Definição e uso

Nesting CSS (&) Seletor usado para aplicar estilos a um elemento no contexto de outro elemento.

A nesting reduz a necessidade de repetir seletores para elementos relacionados.

Exemplo

Exemplo 1

Antes da nesting, você deve declarar explicitamente cada seletor, conforme mostrado a seguir：

.box {
  border: 2px sólido verde;
  background-color: bege;
  font-family: monoespaçado;
  font-size: 20px;
}
.box > a {
  color: verde;
}
.box > a:hover {
  color: branco;
  background-color: salmão;
}

Experimente você mesmo

Exemplo 2

Após a nesting, o seletor é estendido e as regras de estilo relacionadas são agrupadas dentro da regra pai：

.box {
  border: 2px sólido verde;
  background-color: bege;
  font-family: monoespaçado;
  font-size: 20px;
  & > a {
    color: verde;
    &:hover {
      color: branco;
      background-color: salmão;
    }
  }
}

Experimente você mesmo

Dica：Se o estilo .box do exemplo anterior deve ser removido do seu projeto, você pode remover todo o grupo, sem precisar procurar o seletor relacionado.

Sintaxe CSS

parentrule {
  declarações css;
  & childrule {
    declarações css;  } 
}

Detalhes técnicos

Suporte do navegador