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

First-child não funciona

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Melhorando o CSS e atividade Pseudo-classes

por RODRIGO RODRIGUES SENRA SACRAMENTO
| 72.7k xp | 9 posts
Analista Judiciário

Tstei já com fontes diferentes, com outras pseudo-classes (nth-child) e não funciona.

Segue meu código da parte relacionada:

.beneficios { padding: 3em 0; }

.itens { line-height: 1.5; }

.itens:first-child { font-weight: bold;

}

.conteudo-beneficios { width: 640px; margin: auto;

}

.lista-beneficios { width: 40%; display: inline-block; vertical-align: top; }

.imagem-beneficios { width: 60%; }

                <ul class="lista-beneficios">
                    <li class="itens">Atendimento aos Clientes</li> 
                    <li class="itens">Espaço diferenciado</li>
                    <li class="itens">Localização</li>
                    <li class="itens">Profissionais Qualificados</li>
                    <li class="itens">Pontualidade</li>
                    <li class="itens">Limpeza</li>
                </ul><img src="beneficios.jpg"  class="imagem-beneficios">
            </div>
13 respostas
por Vanessa Cristiane Ribeiro
| 214.6k xp | 141 posts
Analista de Desenvolvimento Front-End

Poderia postar todo o código HTML para gente poder olhar?

Não esqueça de colocar dentro de </>. ;-)

por Estudante
| 389.9k xp | 241 posts

Olá, Rodrigo, não tem o ponto antes de "itens", veja:

itens: first-child {
    font-weight: bold;
}

Espero ter ajudados. Bons estudos!

por Anthoni
| 314.8k xp | 164 posts

Fala Rodrigo,

Eu coloquei o código exatamente como o seu e deu certo, não sei se você deu espaço no css do :first-child

.itens:first-child { 
      font-weight: bold;
}

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

por Estudante
| 389.9k xp | 241 posts

Material do curso com erro de digitação:

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

Faltando o ponto antes de itens...

por RODRIGO RODRIGUES SENRA SACRAMENTO
| 72.7k xp | 9 posts
Analista Judiciário

Continua não funcionando, seja com ponto na frente, seja sem ponto.

Com ponto na frente

Sem o ponto nem sequer aparece o item do css:

Sem ponto antes de itens

por Vanessa Cristiane Ribeiro
| 214.6k xp | 141 posts
Analista de Desenvolvimento Front-End

Novamente, poderia postar todo o código HTML para gente poder olhar?

Seria bem útil postar todo o CSS também.

Não esqueça de colocar dentro de </>. ;-)

por Estudante
| 389.9k xp | 241 posts

Rodrigo, fiz o teste aqui utilizando os trechos de código que você postou e, da mesma forma que o Anthoni, funcionou:

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

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

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

Então, o único jeito de desvendar este mistério é fazer o que a Vanessa sugeriu: postar os códigos completos (css e html) para vermos o que está acontecendo. Por exemplo, pode ser que tenha algum comando no css que esteja sobrescrevendo este em questão.

Aguardamos.

por Estudante
| 389.9k xp | 241 posts

Outra coisa que pode ser: talvez esta fonte que você está utilizando não tenha a versão "bold" (negrito).

Experimente trocar o tipo de fonte para ver se resolve...

por RODRIGO RODRIGUES SENRA SACRAMENTO
| 72.7k xp | 9 posts
Analista Judiciário

Então, como eu disse no primeiro post, eu testei com outras fontes. Uma coisa que eu percebo é que, quando eu atualizo a página, o negrito aparece por um décimo de segundo, aí some. No nth-child tb, parece que vem algo por cima e torna de volta sem bold.

HTML

<!DOCTYPE html>

<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Barbearia Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    </head>
    <body>
    [...]

            </section>

            <section class='beneficios'>
                    <h3 class="titulo-principal">Benefícios</h3>

                <div class = "conteudo-beneficios">

                    <ul class="lista-beneficios">
                        <li class="itens">Atendimento aos Clientes</li> 
                        <li class="itens">Espaço diferenciado</li>
                        <li class="itens">Localização</li>
                        <li class="itens">Profissionais Qualificados</li>
                        <li class="itens">Pontualidade</li>
                        <li class="itens">Limpeza</li>
                    </ul><img src="beneficios.jpg"  class="imagem-beneficios">
                </div>

            <div class="video"> 
                <iframe width=100% height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>


        </section>
        </main>

        <footer>
            <img src="logo-branco.png" alt="">
            <p class="copyright">&copy; Copyright Barbearia Alura - 2022 &#169</p>
        </footer>



    </body>



</html>

CSS

body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

[...]

.beneficios {
    padding: 3em 0;
    background: #888888;
}

.itens {
    line-height: 1.5;
}

itens:first-child {
    font-weight: bold;    
}

.itens:before {
    content: "✯";
}

.conteudo-beneficios {
    width: 640px;
    margin: auto;

}

.lista-beneficios {
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

.imagem-beneficios {
    width: 60%;
    opacity: 1;
    transition: 400ms;
    box-shadow: 10px 10px 20px 5px black, -10px -10px 5px 5px gray;
}

.imagem-beneficios:hover {
    opacity: 0.3;
}

.video {
    width: 560px;
    margin: 2em auto;
}

@media screen and (max-width: 480px){
    .caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video {
        width: auto;
    }

    h1 {
        text-align: center;
    }

    nav {
        position: static;
    }

    .lista-beneficios, .imagem-beneficios {
        width: 100%;
    }
}
por Talita
| 51.2k xp | 33 posts

Agora que vi já foi apontado isso . Bom dia! Notei que falta o ponto em

itens:first-child {
    font-weight: bold;    
}
solução!
por Estudante
| 389.9k xp | 241 posts

Oi, Rodrigo, comentei essa linha:

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

E funcionou (não esquecendo do ponto antes de "itens"):

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

Pelo jeito, o conteúdo de body (css) sobrescreve o restante e como os itens estão em uma lista dentro desta seção (body), qualquer outro comando de font-weight não funciona.

Espero ter ajudado. Bons estudos!

por RODRIGO RODRIGUES SENRA SACRAMENTO
| 72.7k xp | 9 posts
Analista Judiciário

Perfeito, Leila! Resolveu!

por Vanessa Cristiane Ribeiro
| 214.6k xp | 141 posts
Analista de Desenvolvimento Front-End

Então, além do erro que já foi apontado, sobre estar faltando o . que compõe o seletor de classe, você está utilizando a fonte Monserrat. E o link do Google Fonts, que está no seu <head>, não contém os pesos necessários para fazer com que o body{ font-weight: 600; } , nem também em .itens:first-child {font-weight: bold;}.

Como está seu link atualmente:

<head>
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>

Por que isto pode estar acontecendo?

Quando vamos importar uma fonte, ali no Google Fonts, por exemplo, precisamos selecionar os pesos que queremos: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Então, para que os pesos(bold e outros valores) funcionem, ao importar a fonte, um link com os pesos semelhante ao que está abaixo será gerado:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

E é por isso que não está funcionando. Testei aqui, com link acima e funcionou: Insira aqui a descrição dessa imagem para ajudar na acessibilidade