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

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

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

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
| 217.7k xp | 141 posts

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
| 323.2k 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

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
| 217.7k xp | 141 posts

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

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

Perfeito, Leila! Resolveu!

por Vanessa Cristiane Ribeiro
| 217.7k xp | 141 posts

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

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA