CSS Nesting – Passo a Passo: Simplifique seus Códigos e Evite Erros

Já ouviu falar em CSS Nesting, ou CSS Aninhado? Aprenda como essa funcionalidade pode simplificar seus códigos e torná-los mais organizados!

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Para receber o(s) arquivo(s) utilizados na aula, preencha seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

CSS Nesting – Passo a Passo: Simplifique seus Códigos e Evite Erros

Você já utilizou o CSS Nesting? Sabe o que é aninhamento em CSS? Neste post, vou te mostrar como essa importante funcionalidade pode tornar seus códigos mais simples e organizados, permitindo uma estrutura mais concisa, legível e menos propensa a erros.

O CSS Nesting possibilita agrupar seletores dentro de outros, criando uma hierarquia visual que reflete a estrutura do HTML. Isso é especialmente útil em projetos maiores, pois melhora a organização e a legibilidade do código.

Vou te mostrar como transformar seu CSS em um CSS aninhado, como aplicar seleções com aninhamento e também como verificar a compatibilidade dessa funcionalidade nas diferentes versões dos navegadores.

Projeto – Réplica da Página do Google

Para visualizarmos na prática o uso e a aplicação do CSS Nesting, utilizarei como exemplo um projeto que já desenvolvemos aqui na Hashtag: Réplica da Página do Google

Ao longo desse projeto, criamos uma réplica da página inicial do Google do zero, construindo todo o HTML e CSS.

Se você quiser entender o passo a passo de como essa página foi feita, com cada recurso e estrutura aplicada, não deixe de conferir o link acima para acessar todas as aulas e detalhes.

Além disso, você pode baixar o material necessário para acompanhar esta aula diretamente, ou explorar todo o processo em nosso curso gratuito.

O que é o CSS Nesting (CSS Aninhado)?

O CSS Nesting ou CSS Aninhado é uma nova funcionalidade do CSS que permite organizar o código de maneira mais concisa, reduzindo a repetição e melhorando a legibilidade do código.

Com o Nesting, você pode agrupar seletores dentro de outros, criando uma hierarquia visual que reflete a estrutura do HTML. Isso é especialmente útil em projetos maiores, onde a organização do código é fundamental.

Uma das principais vantagens de usar o CSS Nesting é a economia de linhas de código. Em vez de escrever repetidamente seletores completos, você pode agrupar seletores relacionados e aplicar estilos específicos de forma hierárquica.

Além disso, o CSS aninhado melhora a legibilidade e a manutenção do código. Em vez de ter regras CSS espalhadas por diferentes partes do arquivo, o Nesting permite que elas fiquem agrupadas, facilitando a localização e atualização dos estilos.

Para usar o CSS Nesting, basta aninhar os seletores dentro de outros. Por exemplo, na nossa réplica da página do Google, vamos alterar o background-color do ícone de câmera.

Usando CSS composto, faríamos a seleção assim:

div .icone-camera {
  background-color: red;
}

Isso alteraria a cor de fundo do ícone na nossa página.

Com o CSS aninhado, podemos organizar os seletores em camadas da seguinte forma:

div {
  .icone-camera {
    background-color: red;
  }
}

O resultado é o mesmo: estamos selecionando um elemento com a classe icone-camera dentro de uma <div>.

Diferentes Formas de Escrever CSS Aninhado

Ao escrever código usando CSS Nesting, podemos seguir o exemplo anterior ou utilizar o & (e comercial). O & é usado para referenciar o seletor pai dentro do aninhamento.

Ou seja, ao usar o &, é importante garantir que haja um espaço quando desejamos selecionar um elemento dentro de outro. Para reescrever o exemplo anterior com o &, faríamos assim:

div {
  & .icone-camera {
    background-color: red;
  }
}

Agora, quando queremos selecionar um elemento que tem a classe .icone-camera e também é uma div (ou seja, é o mesmo elemento), o & não deve ter espaço entre ele e a classe.

div {
  &.icone-camera {
    background-color: red;
  }
}

Portanto, para facilitar a compreensão e padronizar o código, você pode sempre usar o &, garantindo o espaço adequado quando necessário.

A importância do CSS aninhado fica mais clara à medida que o número de seletores aumenta, pois fica evidente como a organização do código melhora e como a estrutura ajuda a entender as regras de estilização.

Por exemplo, poderíamos alterar a cor de fundo dos elementos com as classes .icone-camera e .icone-microfone que estão dentro de uma div com a classe .icones-input.

Como queremos selecionar elementos dentro da div.icones-input, precisamos adicionar um espaço entre o & e a classe do elemento que queremos estilizar.

div.icones-input {
  & .icone-camera {
    background-color: red;
  }
  & .icone-microfone {
    background-color: green;
  }
}

Dessa forma, todos os elementos com a classe .icone-camera dentro da div.icones-input terão o fundo vermelho, e os elementos com a classe .icone-microfone terão o fundo verde.

Compatibilidade do CSS Nesting

Para verificar a compatibilidade do CSS Nesting com diferentes navegadores, podemos usar ferramentas como o site Can I Use.

Esse site permite verificar a compatibilidade de funcionalidades em vários navegadores.

Basta informar o nome da funcionalidade que deseja usar e verificar as versões dos navegadores que a suportam.

Os sinais verdes indicam as versões dos navegadores que oferecem suporte. Além disso, é importante prestar atenção na porcentagem exibida ao lado de “Global”, no canto superior direito.

Uma porcentagem alta indica que a maioria dos navegadores modernos já aceita essa funcionalidade.

Para usar uma funcionalidade em produção, é recomendável que essa porcentagem esteja acima de 90%, garantindo suporte na maioria dos navegadores.

Comparação com Pré-processadores – Sass

Embora o CSS Nesting seja uma novidade no CSS nativo, pré-processadores como o Sass já oferecem essa funcionalidade há bastante tempo.

Pré-processadores são ótimos por oferecerem várias funcionalidades avançadas. No entanto, usar o CSS aninhado diretamente no CSS nativo facilita ainda mais o trabalho ao desenvolver um projeto, pois elimina a necessidade de pré-processamento adicional.

Reescrevendo o CSS da Página do Google

Para praticar e consolidar seu aprendizado sobre CSS Nesting, vamos reescrever o arquivo CSS do projeto Criando a Página do Google.

Você pode tentar reescrever o código sozinho primeiro e depois compará-lo com o código disponibilizado nesta aula.

Ou, se preferir, pode simplesmente comparar o código sem CSS Nesting com o código refatorado com CSS Nesting e observar as principais mudanças.

Código CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #202124;
  height: 100vh;
  display: flex;
  flex-flow: column;
}

/* Header */

header {
  padding: 6px 14px;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 15px;
}

.link-header {
  font-size: 13px;
  color: #000000de;
  text-decoration: none;
}

.link-header:hover {
  text-decoration: underline;
}

.produtos {
  width: 48px;
  height: 48px;
  padding: 12px;
  fill: #5f6368;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}

.produtos:hover {
  background-color: rgba(60, 64, 67, 0.08);
}

.produtos:hover::after {
  position: absolute;
  content: "Google Apps";
  border-radius: 4px;
  background-color: #4f5355;
  font-family: Google Sans, Roboto, Helvetica, Arial, sans-serif;
  color: white;
  font-weight: 500;
  font-size: 13px;
  padding: 5px 10px;
  width: max-content;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 5px);
}

.botao-header {
  font-family: Google Sans, Roboto, Helvetica, Arial, sans-serif;
  background-color: #1a73e8;
  color: white;
  font-weight: 500;
  padding: 9px 29px;
  border-radius: 4px;
  line-height: 16px;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.botao-header:hover {
  background-color: #1b66c9;
  box-shadow: 0 1px 3px 1px rgba(66, 64, 67, 0.15);
}

/* Main */

main {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  height: 100%;
}

.logo-google {
  width: 272px;
}

.input {
  display: flex;
  align-items: center;
  border: 1px solid #dfe1e5;
  border-radius: 24px;
  width: 100%;
  max-width: 584px;
  height: 48px;
  gap: 13px;
  padding: 0px 14px;
}

.input:hover,
.input:focus-within {
  box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
  border-color: transparent;
}

.icone-lupa svg {
  width: 20px;
  height: 20px;
  fill: #9aa0a6;
  display: block;
}

.area-texto {
  font-family: inherit;
  width: 100%;
  font-size: 16px;
  line-height: 22px;
  border: none;
  resize: none;
  outline: none;
}

.icones-input {
  display: flex;
  align-items: center;
  gap: 16px;
}

.icones-input div {
  position: relative;
  cursor: pointer;
}

.icones-input svg {
  width: 24px;
  height: 24px;
  display: block;
}

.icone-teclado:hover::after {
  content: "Ferramentas de introdução";
}
.icone-microfone:hover::after {
  content: "Pesquisa por voz";
}
.icone-camera:hover::after {
  content: "Pesquisar por imagem";
}

.icone-teclado:hover::after,
.icone-microfone:hover::after,
.icone-camera:hover::after {
  position: absolute;
  border-radius: 4px;
  background-color: #4f5355;
  font-family: Google Sans, Roboto, Helvetica, Arial, sans-serif;
  color: white;
  font-weight: 500;
  font-size: 13px;
  padding: 5px 10px;
  width: max-content;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 10px);
}

.botoes-pesquisa {
  display: flex;
  gap: 8px;
}

.botao-pesquisa {
  background-color: #f8f9fa;
  border: solid 1px #f8f9fa;
  padding: 10px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: inherit;
  color: #3c4043;
}

.botao-pesquisa:hover {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border: 1px solid #dadce0;
}

.texto-disponibilizado {
  display: flex;
  gap: 5px;
  font-size: 13px;
  color: #4d5156;
  margin-bottom: 10vh;
}

.texto-disponibilizado a {
  text-decoration: none;
  color: #1a0dab;
}

.texto-disponibilizado a:hover {
  text-decoration: underline;
}

/* Footer */

footer {
  background-color: #f2f2f2;
}

.pais {
  border-bottom: 1px solid #dadce0;
}

.pais,
.informacoes {
  padding: 15px 30px;
  display: flex;
  justify-content: space-between;
}

.informacoes div {
  display: flex;
  gap: 30px;
}

.informacoes a {
  color: inherit;
  text-decoration: none;
}

.informacoes a:hover {
  text-decoration: underline;
}

Código com CSS Nesting:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #202124;
  height: 100vh;
  display: flex;
  flex-flow: column;
}

/* Header */

header {
  padding: 6px 14px;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 15px;
}

.link-header {
  font-size: 13px;
  color: #000000de;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.produtos {
  width: 48px;
  height: 48px;
  padding: 12px;
  fill: #5f6368;
  border-radius: 50%;
  cursor: pointer;
  position: relative;

  &:hover {
    background-color: rgba(60, 64, 67, 0.08);

    &::after {
      position: absolute;
      content: "Google Apps";
      border-radius: 4px;
      background-color: #4f5355;
      font-family: Google Sans, Roboto, Helvetica, Arial, sans-serif;
      color: white;
      font-weight: 500;
      font-size: 13px;
      padding: 5px 10px;
      width: max-content;
      top: 100%;
      left: 50%;
      transform: translate(-50%, 5px);
    }
  }
}

.botao-header {
  font-family: Google Sans, Roboto, Helvetica, Arial, sans-serif;
  background-color: #1a73e8;
  color: white;
  font-weight: 500;
  padding: 9px 29px;
  border-radius: 4px;
  line-height: 16px;
  border: none;
  cursor: pointer;
  text-decoration: none;

  &:hover {
    background-color: #1b66c9;
    box-shadow: 0 1px 3px 1px rgba(66, 64, 67, 0.15);
  }
}

/* Main */

main {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  height: 100%;
}

.logo-google {
  width: 272px;
}

.input {
  display: flex;
  align-items: center;
  border: 1px solid #dfe1e5;
  border-radius: 24px;
  width: 100%;
  max-width: 584px;
  height: 48px;
  gap: 13px;
  padding: 0px 14px;

  &:hover,
  &:focus-within {
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
    border-color: transparent;
  }
}

.icone-lupa {
  & svg {
    width: 20px;
    height: 20px;
    fill: #9aa0a6;
    display: block;
  }
}

.area-texto {
  font-family: inherit;
  width: 100%;
  font-size: 16px;
  line-height: 22px;
  border: none;
  resize: none;
  outline: none;
}

.icones-input {
  display: flex;
  align-items: center;
  gap: 16px;

  & div {
    position: relative;
    cursor: pointer;
  }

  & svg {
    width: 24px;
    height: 24px;
    display: block;
  }
}

.icone-teclado {
  &:hover::after {
    content: "Ferramentas de introdução";
  }
}

.icone-microfone {
  &:hover::after {
    content: "Pesquisa por voz";
  }
}

.icone-camera {
  &:hover::after {
    content: "Pesquisar por imagem";
  }
}

.icone-teclado:hover::after,
.icone-microfone:hover::after,
.icone-camera:hover::after {
  position: absolute;
  border-radius: 4px;
  background-color: #4f5355;
  font-family: Google Sans, Roboto, Helvetica, Arial, sans-serif;
  color: white;
  font-weight: 500;
  font-size: 13px;
  padding: 5px 10px;
  width: max-content;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 10px);
}

.botoes-pesquisa {
  display: flex;
  gap: 8px;
}

.botao-pesquisa {
  background-color: #f8f9fa;
  border: solid 1px #f8f9fa;
  padding: 10px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: inherit;
  color: #3c4043;

  &:hover {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    border: 1px solid #dadce0;
  }
}

.texto-disponibilizado {
  display: flex;
  gap: 5px;
  font-size: 13px;
  color: #4d5156;
  margin-bottom: 10vh;

  & a {
    text-decoration: none;
    color: #1a0dab;

    &:hover {
      text-decoration: underline;
    }
  }
}

/* Footer */

footer {
  background-color: #f2f2f2;
}

.pais {
  border-bottom: 1px solid #dadce0;
}

.pais,
.informacoes {
  padding: 15px 30px;
  display: flex;
  justify-content: space-between;
}

.informacoes {
  & div {
    display: flex;
    gap: 30px;
  }

  & a {
    color: inherit;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

Note como o código refatorado com Nesting evita repetições desnecessárias ao definir estilos semelhantes para diferentes elementos e estados, como o hover.

Com essa abordagem, o código fica mais conciso e organizado, facilitando sua leitura e manutenção.

Conclusão – CSS Nesting – Passo a Passo: Simplifique seus Códigos e Evite Erros

O CSS Nesting é uma poderosa adição ao CSS, que facilita a escrita de estilos de forma mais concisa e organizada, mantendo uma hierarquia visual que reflete a estrutura do HTML. Isso torna o código mais legível e fácil de manter.

Nessa aula, você aprendeu o que é CSS Nesting, como verificar sua compatibilidade com navegadores e como implementá-lo em seus projetos.

Com a crescente adoção do CSS aninhado pelos principais navegadores, essa será uma ferramenta essencial para qualquer desenvolvedor front-end. Portanto, não perca tempo! Aprenda e pratique essa importante funcionalidade.

E se você quer se aprofundar ainda mais no desenvolvimento web, escrevendo códigos em HTML e CSS de forma profissional e criando projetos reais, conheça o nosso Curso Completo HTML e CSS Impressionador.

Hashtag Treinamentos

Para acessar publicações de JavaScript, clique aqui!

Posts mais recentes de HTML e CSS

• 
  Aprenda Tailwind CSS com apenas uma aula!3 de março de 2025
  Descubra como o Tailwind CSS pode revolucionar o seu desenvolvimento web. Aprenda a usar essa ferramenta que vai elevar o nível do seu front-end.
• 
  Configure seu VS Code para HTML e CSS, e conheça outras Tecnologias Full Stack!24 de fevereiro de 2025
  Aprenda como baixar e configurar o VS Code para HTML e CSS e deixe-o pronto para iniciar o seu desenvolvimento web!
• 
  Guia rápido – Aprenda como usar Bootstrap do Zero10 de fevereiro de 2025
  Quer criar sites bonitos e responsivos sem complicação? Aprenda como usar Bootstrap, uma ferramenta que te permite criar páginas completas com o mínimo de dificuldade e esforço!

Posts mais recentes da Hashtag Treinamentos

• 
  Aprenda a Criar Planilha de Estoque com ChatGPT e Excel16 de maio de 2025
  Quer aprender como criar uma planilha de estoque com ChatGPT e Excel? Aprenda como fazer isso de forma simples e direta!
• 
  Conheça o Gemini, o ChatGPT do Google15 de maio de 2025
  Conheça o Gemini, a inteligência artificial do Google, que funciona basicamente como o ChatGPT do Google.
• 
  Como Perguntar e Entender Direções em Inglês: Guia Completo para Viajantes15 de maio de 2025
  Aprenda como pedir e entender direções em inglês de forma clara e educada. Confira nosso guia completo com frases prontas e com as pronuncias adequadas.

Diego Monutti

Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.