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

Propriedade "color" não atinge elemento filho do elemento "aside"

Porque neste trecho de código

<aside>
        <h1>João da Silva</h1>
        <nav>
            <ul>
                <li><a href="index.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>
        </nav>
</aside>
aside {
    background-color: #3C1D3D;
    color: #F2FFFC;
}

nav a {
    color: #F2FFFC;
}

é necessário aplicarmos duas vezes a propriedade color para que tanto o conteúdo de h1 como o conteúdo dentro dos li's tenham a cor #F2FFFC? Se eu declarar a cor apenas dentro do elemento aside os itens dentro da li não a recebem. O comportamento padrão não seria os elementos filhos receberem a cor dos elementos pai?

2 respostas
solução!

Boa tarde, André! Tudo certo? =)

Por padrão, vários elementos herdam a propriedade color da tag pai, sim. Entretanto, por padrão, a âncora (<a>) ignora a cor, quando na presença do atributo href.

Uma coisa que você poderia fazer é declarar que você quer substituir esse comportamento padrão e dizer que mesmo essas tags devem herdar a cor:

a {
    color: inherit;
}

Dessa forma, não importa se há ou não o atributo href, a cor será a mesma. =)

Espero ter ajudado, mas qualquer dúvida só postar por aqui!

Abraço e bons estudos,

Fábio

Boa tarde Fábio, tudo certo!

Obrigado pela resposta. Abraços!