Margin a direita last child não funciona | Arquitetura CSS: descomplicando os problemas

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por Afrânio Azevedo e Silva Segundo

| 80k xp | 38 posts

Criar e a classe na ul, mas ao aplicar last child, não tira a margem da direita. Segue HTML

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <link href="https://fonts.googleapis.com/css?family=Pacifico|Roboto:100,300,400,500,700,900" rel="stylesheet" />
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Fruta & Fruto</title>
        <link href="./assets/css/normalize.css" rel="stylesheet" />
        <link href="./assets/css/reset.css" rel="stylesheet" />
        <link rel="stylesheet" href="./assets/css/cabecalho.css">
        <link rel="stylesheet" href="./assets/css/menu/menu.css">
        <link rel="stylesheet" href="./assets/css/menu/menu-item.css">
        <link rel="stylesheet" href="./assets/css/menu/menu-link.css">
    </head>
    <body>
        <header class="cabecalho">
           <img src="./assets/img/logo.jpg" alt="imagem da logo" class="logo"> 
           <nav class="menu">
            <ul class="menu-lista">
                <li class="menu-item"><a class="menu-link ativo" href="#">início</a></li>
                <li class="menu-item"><a class="menu-link" href="#">receitas</a></li>
                <li class="menu-item"><a class="menu-link" href="#">quem somos</a></li>
                <li class="menu-item"><a class="menu-link" href="#">comunidade</a></li>
            </ul>
           </nav>
        </header>
    </body>
</html>

CSS


.menu-lista{
    display: flex;
    list-style: none;
}

.menu-lista:last-child a{
    margin-right: 0;
}

3 respostas

por Noberto Luis Martins Ferreira Filho

| 127.3k xp | 77 posts

Frontend developer

24/11/2022

olá, acredito que dando um espaço entre ".menu-lista" e a pseudo-class ":last-child" resolva.

.menu-lista{
    display: flex;
    list-style: none;
}

.menu-lista :last-child a{
    margin-right: 0;
}

solução!

por Noberto Luis Martins Ferreira Filho

| 127.3k xp | 77 posts

Frontend developer

25/11/2022

para entender melhor:

.menu-lista :last-child a{
    margin-right: 0;
}

o trecho ".menu-lista" seleciona a lista toda

o trecho ":last-child" se tiver um espaço separando da classe, ele seleciona o último child da lista que você chamou acima.

o techo "a" no final seleciona todos os contidos no último child da lista escolhida.

obs.: quando você colocou o nome da classe junto ao pseudo-class ":last-child" (sem espaço entre eles) você estava seleciona todos os elementos que continham a classe ".menu-lista" e que eram last-child dos seus parents e selecionando as

dentro deles. Ou seja, é um comando válido, mas ele faz outra coisa.

por Afrânio Azevedo e Silva Segundo

| 80k xp | 38 posts

25/11/2022

Obrigado pela dica, Noberto! Dei espaço e retirei a tag "a" e funcionou. Ficou assim:

.menu-lista{
    display: flex;
    list-style: none;
}

.menu-lista :last-child{
    margin-right: 0;
}