Carregando...

Aninhamento CSS

As variáveis deram nome aos seus valores. calc e companhia os calcularam. O nesting organiza os seletores que usam esses valores: mantenha o título, o botão e os estilos hover de um card dentro de .card em vez de repetir o nome do pai pelo arquivo inteiro.

Aninhe um seletor filho

Escreva uma regra dentro de outra. Um seletor de classe ou tipo aninhado junta-se como descendente do pai (combinador de espaço), a menos que você diga o contrário com &:

Card styles nested under one parent

css 
.card {
padding: 1.25rem;
border-radius: 0.75rem;
background: var(--surface, #fff);

.title {
margin: 0 0 0.5rem;
font-size: 1.25rem;
}

.body {
color: var(--muted, #444);
line-height: 1.5;
}
}

O navegador expande isso para .card .title e .card .body. Você continua com seletores descendentes comuns — nesting é açúcar para estrutura e localidade, não um novo modelo de correspondência.

O seletor pai &

Use & quando a regra aninhada precisar se prender ao mesmo elemento que o pai — pseudoclasses, pseudoelementos ou uma classe extra no pai:

Hover and modifier on the same element

css 
.button {
display: inline-flex;
padding: 0.6rem 1.1rem;
border: 0;
border-radius: 0.5rem;
background: var(--brand, #2563eb);
color: #fff;

&:hover {
background: var(--brand-hover, #1d4ed8);
}

&:focus-visible {
outline: 2px solid var(--brand, #2563eb);
outline-offset: 2px;
}

&.is-primary {
background: var(--brand-strong, #1e40af);
}
}

&:hover significa .button:hover. &.is-primary significa .button.is-primary. Sem &, um :hover { } solto é nesting inválido em CSS nativo — o & deixa a ligação explícita.

Combinadores com &

Coloque o combinador depois de & quando quiser um filho, um irmão ou outro vínculo explícito — não o espaço descendente simples:

Child and adjacent patterns with &

css 
.nav {
display: flex;
gap: 0.75rem;

& > .item {
padding: 0.35rem 0.6rem;
}

& > .item + .item {
border-inline-start: 1px solid #ddd;
}

/* same as nesting .item without & — descendant */
.badge {
font-size: 0.75rem;
}
}

& > .item → .nav > .item. Um .badge aninhado sem & → .nav .badge. Escolha de propósito: descendentes profundos por acidente são um cheiro clássico de nesting.

Aninhe @media com o componente

Você pode aninhar at-rules como @media dentro de uma regra de estilo para que os breakpoints vivam ao lado do componente que alteram:

Responsive tweaks beside the component

css 
.hero {
padding: 2rem 1.25rem;

h1 {
font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

@media (min-width: 48rem) {
padding: 3rem 2rem;

h1 {
max-width: 20ch;
}
}
}

Expandida, a media query ainda envolve as declarações de .hero (e .hero h1). Combine isso com tokens e clamp() das lições anteriores do Modern Toolkit — o nesting só reposiciona as regras.

Padrões de nesting em um relance

📊 Cola de nesting nativo

Você escreve Significa Use quando
.card { .title { } } .card .title Estilizar um descendente sob o componente
.btn { &:hover { } } .btn:hover Pseudoclasse no mesmo elemento
.btn { &.big { } } .btn.big Classe extra no mesmo elemento
.nav { & > a { } } .nav > a Combinador filho explícito
.box { @media (…) { } } Media query limitada aos seletores dessa regra Manter breakpoints com o componente

Mantenha os ninhos rasos

Dois ou três níveis costumam permanecer legíveis. Árvores mais profundas recriam o problema da «pirâmide de seletores» das equipes Sass: diffs difíceis, specificity maior e estilos que só fazem sentido dentro de um pai gigante. Prefira uma raiz de componente clara (.card, .nav) e aninhe estados e filhos próximos — não a página inteira.

Pacote de componente: tokens + nest + estados

Um trecho realista une as três últimas ideias do toolkit sem repetir as lições de calc ou variables:

Panel with tokens, nested parts, and a state

css 
.panel {
--panel-pad: 1rem;
padding: var(--panel-pad);
border: 1px solid #e5e7eb;
border-radius: 0.75rem;

.heading {
margin: 0 0 0.5rem;
font-weight: 600;
}

.actions {
display: flex;
gap: calc(var(--panel-pad) / 2);
margin-block-start: var(--panel-pad);
}

&.is-compact {
--panel-pad: 0.5rem;
}

@media (max-width: 36rem) {
.actions {
flex-direction: column;
}
}
}

Tokens continuam sendo custom properties; calc ainda deriva o espaçamento; o nesting mantém heading, actions, o estado compacto e o ajuste de tela pequena no mesmo lugar.

Experimente você mesmo

  1. Pegue regras planas .card {}, .card .title {}, .card .meta {} e reescreva-as com nesting sob .card.
  2. Adicione &:hover em um .link para que só o link (não um span aninhado) mude de cor.
  3. Aninhe @media (min-width: 40rem) dentro de .sidebar para alargar o padding — confirme no DevTools os seletores expandidos.
  4. Converta um :hover { } aninhado por engano (sem &) em &:hover { } e note que passa a validar.
  5. Limite um ninho bagunçado de três níveis a dois promovendo um bloco interno à própria classe.

Erros comuns

  • Escrever :hover { } aninhado sem & — inválido ou não era o que você queria; use &:hover
  • Esperar que .child solto signifique .parent.child — isso precisa de &.child
  • Copiar às cegas hacks Sass &__element de BEM — o nesting nativo segue a gramática de seletores CSS
  • Aninhar cinco níveis «porque dá» — legibilidade e specificity sofrem
  • Achar que nesting substitui var() ou calc() — só agrupa seletores e at-rules

Resumo

  • Aninhe seletores filhos para manter os estilos do componente locais; por padrão expandem para descendentes
  • Use & para estados do mesmo elemento (:hover, .is-active) e combinadores explícitos
  • Aninhe @media ao lado do componente que você está ajustando
  • Mantenha os ninhos rasos; nesting é estrutura, não token nem matemática
  • Próximo no Modern Toolkit: container queries — estilos a partir do tamanho do pai, não só do viewport

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
6
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 65 de 66
Css Tutorial