Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Utilizando Nth-child para uma lista não direta

por Robert Oliveira Correia Santos
| 40.3k xp | 16 posts
Desenvolvedor júnior

Eu fiz algumas estilizações para tópicos e gostaria de reutilizar a mesma classe para todos os tópicos, porém, eu quero posicionar os tópicos de formas diferentes, (um fique para direita e o outro para esquerda), mas eu não acho que funcione utilizar o nth-child nesta situação pois ele serve para irmãos dentro do mesmo bloco, correto? para uma lista com várias

  • . há alguma forma de eu poder reutilizar a mesma classe e fazer a mesma função do nth-child ? não queria criar outra classe pois penso que não seria uma boa prática, segue os exemplos e a situação:

um tópico eu quero para direita e o outro para esquerda utilizando a mesma classe, porém uma especificação que faça o mesmo que o nth-child que possa mudar apenas um container especifico 

 <main class="conteudoprincipal">

        <div class="container">

                <img class="banner__principal" src="./img/banner.png" alt="banner principal">

                <section class="topicos__principais">

                    <img class="imagemtopico-principal" src="./img/imagemtópico1.jpeg" alt="tópicos do hamburguer">

                    <p class="textoconteudo"> O melhor hamburguer artesanal <br> grelhado em temperaturas 
                        que apenas vai te deixar com vontade.<br>
                        Experimente esse lanche com 180g de puro sabor.</p>

                </section>



                <section  class="topicos__principais">

                    <img class="imagemtopico-principal" src="img/imagemtópico2.jpeg">

                    <p class="textoconteudo">Se um hamburguer artesanal é bom, imagina dois...<br> 
                        E ainda por cima com muito bacon para deixar <br>  tudo muito melhor nesse lanche.</p>

                </section>

       </div>


    </main>

Aceito dicas, sugestões e boas práticas.

2 respostas
por Mateus Henrique
| 989.4k xp | 1546 posts
Instrutor Desenvolvedor

Fala Robert, tudo bem? Espero que sim!

Não sei se entendi muito bem a sua dúvida, mas o que você pode fazer é, primeiramente, como esses elementos serão uma lista, faz sentido colocarmos em uma tag ul, certo? Ja que ul é uma lista não ordenada, então podemos fazer assim primeiramente:

 <main class="conteudoprincipal">
  <div class="container">
    <img
      class="banner__principal"
      src="./img/banner.png"
      alt="banner principal"
    />

    <ul>
      <li class="topicos__principais">
        <img
          class="imagemtopico-principal"
          src="./img/imagemtópico1.jpeg"
          alt="tópicos do hamburguer"
        />

        <p class="textoconteudo">
          O melhor hamburguer artesanal <br />
          grelhado em temperaturas que apenas vai te deixar com vontade.<br />
          Experimente esse lanche com 180g de puro sabor.
        </p>
      </li>
      <li class="topicos__principais">
        <img class="imagemtopico-principal" src="img/imagemtópico2.jpeg" />

        <p class="textoconteudo">
          Se um hamburguer artesanal é bom, imagina dois...<br />
          E ainda por cima com muito bacon para deixar <br />
          tudo muito melhor nesse lanche.
        </p>
      </li>
    </ul>
  </div>
</main>

Como pode ver, convertemos aquelas sections em item de uma lista, isso melhora a semântica do código.

Agora iremos utilizar a classe topicos__principais, e nessa classe vamos utilizar o mesmo :nth-child, porém utilizaremos como valor o even ou odd que significa elementos pares ou elementos impares:

.topicos__principais:nth-child(even) {

}

.topicos__principais:nth-child(odd) {

}

Onde utilizamos :nth-child(even) você vai colocar a estilização de pares e nth-child(odd) para elementos impares.

Por exemplo:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Como pode ver, apliquei background vermelho para elementos pares, e azul para elementos impares que possuirem essa classe

Você também pode consultar a documentação completa do nth-child e ver o poder que ele tem.

Se não foi isso que você queria dizer, pode falar pra gente ;D

Abraços e bons estudos :D

solução!
por Robert Oliveira Correia Santos
| 40.3k xp | 16 posts
Desenvolvedor júnior

Perfeito, muito Obrigado !