2

Tenho uma div .container com várias divs .box onde quero mostrar 5 divs por linha quando a largura da tela for maior que 1439px. Cada div .box possui uma margem top e right de 15px, só que quero que a última div .box de cada linha possua a margem direita (margin-right) com valor 0 para que não tenha espaçamento à direita, para ficar bem ajustada dentro do .container.

Para isso utilizei:

.box{
   width: 100%;
   max-width: calc(20% - 15px);
   height: 200px;
   background: red;
   margin: 15px 15px 0 0;
}

.box:nth-child(5n+5){
   margin-right: 0;
}

Funciona perfeitamente, porém quando entra no @media, onde a resolução for menor que 1440px, que quero mostrar, em vez de 5, 4 divs por linha:

@media screen and (max-width: 1439px){

   .box{
      max-width: calc(25% - 15px);
   }

   .box:nth-child(4n+4){
      margin-right: 0;
   }

}

Veja que alterei a fórmula do :nth-child() para 4n+4. Funciona, mas a 5ª div ainda continua com o margin-right: 0 inicial definido fora do @media, fazendo-a ficar grudada na 6ª div:

inserir a descrição da imagem aqui

Tentei resetar o margin-right de todas as .box com margin-right: 15px antes do .box:nth-child(4n+4) mas mesmo assim a 5ª div continua com margin-right: 0:

@media screen and (max-width: 1439px){

   .box{
      max-width: calc(25% - 15px);
      margin-right: 15px; /* TENTEI RESETAR AQUI! */
   }

   .box:nth-child(4n+4){
      margin-right: 0;
   }

}

Creio isso se dá pela prioridade de classe + pseudo ser maior do que apenas classe.

Como fazer para que as div .box voltem a ter margin-right: 15px antes de aplicar o .box:nth-child(4n+4){ margin-right: 0; }?

Segue o código:

body{
   margin: 0;
}

.container{
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}

.box{
   width: 100%;
   max-width: calc(20% - 15px);
   height: 200px;
   background: red;
   margin: 15px 15px 0 0;
}

.box:nth-child(5n+5){
   margin-right: 0;
}


@media screen and (max-width: 1439px){
   
   .box{
      max-width: calc(25% - 15px);
      margin-right: 15px;
   }

   .box:nth-child(4n+4){
      margin-right: 0;
   }
   
}
<div class="container">
   <div class="box">1</div>
   <div class="box">2</div>
   <div class="box">3</div>
   <div class="box">4</div>
   <div class="box">5</div>
   <div class="box">6</div>
   <div class="box">7</div>
   <div class="box">8</div>
   <div class="box">9</div>
</div>

2
  • Vixi, Tio Sam perguntando de css, então o bagulho deve ser loko mesmo! :D
    – hugocsl
    31/10/2019 às 18:01
  • :D... deve ser moleza... eu que não tô conseguindo enxergar :/
    – Sam
    31/10/2019 às 18:10

2 Respostas 2

6

Os ponto

Essa classe:

   .box:nth-child(4n+4){
      margin-right: 0;
   }

Não anula essa:

   .box:nth-child(5n+5){
      margin-right: 0;
   }

Que não anula essa

   .box:nth-child(odd){
      margin-right: 30px;
   }

São regras diferente, e uma regra não sobrescreve a outra já que elas não são iguais.

Creio isso se dá pela prioridade de classe + pseudo ser maior do que apenas classe.

Exato, seu raciocínio está correto!


Para resolver

Vc pode incluir o nth-child(5n+5), na regra anterior tipo .box, .box:nth-child(5n+5) { } ai ela volta ao padrão.

inserir a descrição da imagem aqui

  body{
      margin: 0;
   }
   
   .container{
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
   }
   
   .box{
      width: 100%;
      max-width: calc(20% - 15px);
      height: 200px;
      background: red;
      margin: 15px 15px 0 0;
   }
   
   .box:nth-child(5n+5){
      margin-right: 0;
   }
   
   
@media screen and (max-width: 1439px){
  
  .box,
  .box:nth-child(5n+5) {
      max-width: calc(25% - 15px);
      margin-right: 15px;
  }

  .box:nth-child(4n+4){
      margin-right: 0;
  }
  
}
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
</div>

1
  • Coloquei uma resposta com o que encontrei. Abs!
    – Sam
    31/10/2019 às 18:39
2

A resposta do @hugocss funciona nesse caso, mas vou deixar uma resposta que funciona de forma melhor quando tiver outras @media onde eu queira mostrar menos divs por linha, como 3 ou 2.

É só utilizar na fórmula apenas o n, que irá aplicar em todas as divs, pois assim terá o mesmo peso de classe + pseudo antes de aplicar a fórmula xn+x, pois o n é referente a todos os elementos do seletor:

body{
   margin: 0;
}

.container{
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}

.box{
   width: 100%;
   max-width: calc(20% - 15px);
   height: 200px;
   background: red;
   margin: 15px 15px 0 0;
}

.box:nth-child(5n+5){
   margin-right: 0;
}


@media screen and (max-width: 1439px){
   
   .box{
      max-width: calc(25% - 15px);
   }

   .box:nth-child(n){
      margin-right: 15px;
   }

   .box:nth-child(4n+4){
      margin-right: 0;
   }
   
}

@media screen and (max-width: 800px){
   
   .box{
      max-width: calc(33% - 15px);
   }

   .box:nth-child(n){
      margin-right: 15px;
   }

   .box:nth-child(3n+3){
      margin-right: 0;
   }
   
}
<div class="container">
   <div class="box">1</div>
   <div class="box">2</div>
   <div class="box">3</div>
   <div class="box">4</div>
   <div class="box">5</div>
   <div class="box">6</div>
   <div class="box">7</div>
   <div class="box">8</div>
   <div class="box">9</div>
</div>

1
  • 1
    É interessante tb, dependendo da quantidade de regra que fizer pode economizar umas linhas de código mesmo, essas regras de nth-chilt as vezes são meio confusas mesmo
    – hugocsl
    31/10/2019 às 18:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .