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

Nth child - dúvida sobre funcionamento

Referente ao curso Flexbox: posicione elementos na tela, no capítulo Grid principal e limitações do flexbox e atividade Terminando course grid

por PRISCILA SANCHES JANUARIO
| 221.4k xp | 16 posts

Olá,

O nth-child funciona com elementos filhos diversos, ou precisam ser a mesma tag, como no exemplo de aula? Pergunto pois estou tentando utiliza-lo em uma outra situação, mas não consegui fazer funcionar. Segue o trecho do html e css (que não funcionou..rs):

        <fieldset class="projeto">
            <p class="titulo-sidebar">Seu projeto</p>
            <input type="text" placeholder="Nome do seu projeto" class="entrada">
            <textarea placeholder="Descrição do seu projeto" class="entrada"></textarea>
            <p class="titulo-sidebar">Personalização</p>

Queria aplicar um margin-top específico para o quarto elemento filho (p class="titulo-sidebar"). Para isso tentei o seguinte:

.projeto:nth-child(4){
    margin-top: 2rem;  
}

Mas nada aconteceu.

3 respostas
solução!
por Estudante
| 274.4k xp | 229 posts

Oi Priscila,

Sim, o nth-child funciona com qualquer tag, mas no caso teriam 2 maneiras de resolver.

Adicionar a mesma classe para todos os filhos:

        <fieldset class="projeto">
            <p class="titulo-sidebar filho">Seu projeto</p>
            <input type="text" placeholder="Nome do seu projeto" class="entrada  filho">
            <textarea placeholder="Descrição do seu projeto" class="entrada  filho"></textarea>
            <p class="titulo-sidebar  filho">Personalização</p>
.projeto .filho:nth-child(4){
    margin-top: 2rem;  
}

Ou chamar de forma genérica:

.projeto *:nth-child(4){
    margin-top: 2rem;  
}
por Luis Dias
| 2590.6k xp | 2182 posts
Developer PHP (⌐■_■)

Oi, Priscila, o :nth-child é usado para grupo de elementos iguais e juntos

Para exemplificar com o seu código eu tenho que juntar dois parágrafos '< p >' para formar um grupo de pelo menos 2 elementos

<fieldset class="projeto">
  <p class="titulo-sidebar">Seu projeto</p>
  <p class="titulo-sidebar">Personalização</p>
  <input type="text" placeholder="Nome do seu projeto" class="entrada">
  <textarea placeholder="Descrição do seu projeto" class="entrada"></textarea>

No CSS tenho q informar qual é o elemento

.projeto>p:nth-child(2){
    margin-top: 2rem;  
}

Para mais informações sobre :nth-child()

por PRISCILA SANCHES JANUARIO
| 221.4k xp | 16 posts

Obrigada! Agora funcionou.