Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Aplicando o :last-child na classe: pessoa

Eu fiz da seguinte forma no CSS:

.pessoa {
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 0) { /*Será aplicado as seguintes modificações para as tela maiores que 0px:*/
    .pessoa {
        margin-bottom: 4rem; /*Para as telas maiores que 0 será aplicado na classe .pessoa uma margem para baixo de 4rem*/
    }

    .pessoa:last-child { /*Ao last child será aplicado o margin-botton 0rem na última classe de .pessoa*/
        margin-bottom: 0;
    }
}

@media screen and (min-width: 768px) { /*Será aplicado as seguintes modificações para as tela maiores que 768px*/
    .pessoa {
        margin-bottom: 0; /*Esse é formato padrão/original para as telas maiores de 768px*/
    }
}

O que não entendi foi porque funcionou o last-child na classe .pessoa.

Eu acreditava que o last-child só podia ser usado na classe pai, no caso, classe .pessoas para poder estilizar o seu último filho da classe .pessoa.

Eu tentei usar lá, mas não funcionou. Eu creio que não funcionou porque a classe .pessoa sobrescrevia o que eu escrevia dentro do last-child na classe .pessoas.

Vejam o HTML:

<section class="quem-somos">
        <h3 class="quem-somos__titulo">Quem somos</h3>
        <p class="quem-somos__descricao">Conheça a comunidade por trás da iniciativa</p>
        <div class="pessoas">
            <div class="pessoa">
                <div class="pessoa__imagem pessoa__imagem--roberta"></div>
                <span class="pessoa__nome">Roberta</span>
                <span class="pessoa__funcao">Conteúdo</span>
            </div>
            <div class="pessoa">
                <div class="pessoa__imagem pessoa__imagem--marcela"></div>
                <span class="pessoa__nome">Marcela</span>
                <span class="pessoa__funcao">Chef de cozinha</span>
            </div>
            <div class="pessoa">
                <div class="pessoa__imagem pessoa__imagem--andreia"></div>
                <span class="pessoa__nome">Andréia</span>
                <span class="pessoa__funcao">Pequena Produtora</span>
            </div>
        </div>
    </section>

Desde já agradeço a atenção.

Sucesso na sua jornada!!

3 respostas

Também fiquei com essa duvida, obrigado pela publicação aguardo a resposta de alguém aqui também.

solução!

Olá Diógenes, boa tarde!

*Resolução do Problema: *

De acordo com a sua pergunta, você quer saber porque o pseudo-seletor ":last-child" funcionou na classe ".pessoa" e não no elemento pai '.pessoas".

**Solução do Problema: *

O pseudo-seletor ":last-child" serve para você selecionar o ultimo filho de um elemento pai, mas para isso você tem que especificar qual é o filho que você quer, ou seja, o elemento html. Por exemplo, temos o seguinte html:

<section class="mercado">
    <div>
        <h2>Lista de compras</h2>

        <ul>
            <li>carne</li>
            <li>feijão</li>
            <li>arroz</li>
            <li>pão</li>
            <li>margarina</li>
            <li>café</li>
        </ul>
    </div>
</section>

Agora o css:

section ul li {
    margin-bottom: 8px;
}

Mas se em uma situação onde o margin do último li (que é o café), acaba afetando o estilo final, fazendo com que sua section aumente mais do que o devido, você pode usar o pseudo-seletor ":last-child" para aplicar um estilo para um elemento especifico:

section ul li {
    margin-bottom: 8px;
}

section ul li:last-child {
    margin-bottom: 0px;
}

**Conclusão: *

O pseudo-seletor ":last-child" significa "ultimo filho", mas ultimo filho de quem? O pai dele vai ser o seletor anterior:

section ul li {
    margin-bottom: 8px;
}

// Ou seja, o pai aqui é o elemento "ul". Então ele vai pegar o ultimo filho li do pai ul.
section ul li:last-child {
    margin-bottom: 0px;
}

Percebeu? O pseudo-seletor ":last-child" pega o ultimo filho de um elemento pai, e você especifica qual deve ser o ultimo elemento a ser selecionado: , "p:last-child"

article p:last-child {} // Esse seleciona o ultimo paragrafo dentro do article
header div:last-child {} // Esse seleciona a ultima div dentro do header
main section:last-child {} // Esse seleciona a ultima section dentro do main

h2:last-child {} // Esse seleciona o ultimo h2 dentro do documento todo. 
p:last-child {} // Esse seleciona o ultimo p dentro do documento todo. 

// E é assim por diante

*Despedida: *

Tenha um bom estudo!!

Eita .... Que explicação TOPPPPP. kkk

Parabéns e eu agradeço o tempo dispendido para me ensinar e ajudar.

Eu até que tinha uma noção que poderia ser o que explicou, mas fiquei na dúvida e por isso vim aqui tirá-la.

As vezes a gente confunde alguns conceitos.

Carlos, agradeço muito sua atenção, tempo e didática.

Sucesso na sua jornada!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software