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

Dúvida no Ex. 1 da Aula 8 - Mais seletores

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Mais seletores e atividade Classe nos links de redes sociais

por Estudante
| 90.8k xp | 13 posts

Coloquei primeiramente a " class="redes_sociais" nos 3 " li " e tudo funcionou perfeitamente.

<ul >
    <li class="redes_sociais"><a href="https://www.github.com"><img src="github.png" alt="github"></a></li>
    <li class="redes_sociais"><a href="https://www.twitter.com"><img src="twitter.png" alt="twitter"></a></li>
    <li class="redes_sociais"><a href="https://www.br.linkedin.com"><img src="linkedin.png" alt="linkedin"></a></li>                
</ul>

Porem, ao especificar a " class="redes_sociais " na " ul " conforme pedido no exercício, os elementos não pegam o "inline-block" do css.

<ul class="redes_sociais">
    <li ><a href="https://www.github.com"><img src="github.png" alt="github"></a></li>
    <li ><a href="https://www.twitter.com"><img src="twitter.png" alt="twitter"></a></li>
    <li ><a href="https://www.br.linkedin.com"><img src="linkedin.png" alt="linkedin"></a></li>                
</ul>

Código Css:

.redes_sociais {
    display: inline-block;
}

Alguém esta conseguindo encontrar o erro?

5 respostas
por Leandro Souza
| 458.9k xp | 201 posts
Desenvolvedor Web

precisa alterar para:

.redes_sociais li {
    display: inline-block;
}

assim funcionará perfeitamente

por Estudante
| 90.8k xp | 13 posts

Mas Leandro seguindo sua sugestão, nem é preciso especificar a "li " depois da "class" que vai funcionar corretamente...

Mas isso não resolve o problema real de conseguir com que os comandos funcionem corretamente a partir da "ul" exatamente como consta na proposta do exercício.!

Eu gostaria de entender o porque não esta funcionando da forma como é apresentado no exercício e no vídeo.

HTML

<aside>
        <img src="eu.jpg" title="Minha Foto" alt="Foto de João da Silva" class="minha_foto">
        <nav>
            <h1>João da Silva</h1>
            <ul>
                <li><a href="home.html">Home</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="bio.html">Sobre mim</a></li>
                <li><a href="blog.html">Blog</a></li>                
                <li><a href="contato.html">Contato</a></li>
            </ul>
            <ul class="redes_sociais">
                <li><a href="https://www.github.com"><img src="github.png" alt="github"></a></li>
                <li><a href="https://www.twitter.com"><img src="twitter.png" alt="twitter"></a></li>
                <li><a href="https://www.br.linkedin.com"><img src="linkedin.png" alt="linkedin"></a></li>                
            </ul>
        </nav>
    </aside>

CSS

.redes_sociais {
    display: inline-block;
}

Se a forma como se especifica esta correta, porque não funciona?

solução!
por Leandro Souza
| 458.9k xp | 201 posts
Desenvolvedor Web

Iury, você não entendeu uma coisa...

O ul se comporta diferente do li, o ul é como se fosse um container e os lis seus itens, por padrão o modo de display no li é block, por isso precisa selecionar o li de alguma forma, nesse caso ul e seu descendente li

ul li .redes_sociais li

selecionar apenas o ul não muda nada, pois os lis estão sendo ignorados.

pense assim, mover uma caixa de fósforo (ul) não vai mudar os fósforos (li) em si, apenas a caixa.

por Romário Torres Alcântara
| 279.3k xp | 488 posts
Moderador

Olá Iury! O que o Leandro disse está correto. Lembre-se que em CSS o seletor mais especifico prevalece na hora da aplicação dos estilos. Logo, quando você põe como classe redes_sociais na tag <ul>, o estilo é aplicado somente a tag <ul>, pois por padrão as tags <li> são block e por esse estilo ser mais especifico ele sobrepõe o por você aplicado.

Por isso é necessário fazer como o Leandro sugeriu:

.redes_sociais li {
    display: inline-block;
}

Ou fazer como você fez anteriormente, pondo a classe diretamente nas tags <li>.

Espero ter ajudado! Bons Estudos!

por Estudante
| 90.8k xp | 13 posts

uhnm...

Agora sim, entendido completamente!

Valeu piazada, nota 10!