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

Dúvida sobre a disposição do código

Olá! De acordo com o exercício apontado pelo professor no tópico 11 da aula 3, deveria ficar da seguinte forma:

main a {
    color: #851944;
}

aside a {
    color: inherit;
    font-family: "Open Sans Condensed", sans-serif;

Da forma como eu entendi, o meu código ficou assim:

main a{
    color:#851944;

}

aside a{

    background-color: #3C1D3D;
    color: inherit;
    font-family: "Open Sans Condensed", sans-serif;
}

footer{
    background-color: #000000;
    color: #F2FFFC;
}

nav a{
    color: #F2FFFC;
}

O resultado foi que no menú logo abaixo da foto de João da Silva, apenas as palavras ficaram com um fundo roxo. Antes, quando o "aside" não possuia o "a", toda a extensão x do menú possuia um fundo roxo. Está correto da forma como ficou?

Obrigado.

2 respostas
solução!

Oi Lucas, tudo bom?

Cada elemento que você lista no CSS dá um grau maior de especificação. Quando você adicionou o a, você disse que queria que todos os links dentro do aside deveriam ter aquela fonte, com a cor herdada e um fundo roxo. E não o aside em si.

Para que o fundo roxo não fique no a e sim no aside, você precisa retirar o background-color do contexto em que especifica alterações para a.

Ou seja, alterações que você quer que sejam feitas no aside, devem ficar assim:

aside {
     background-color: #3C1D3D;
}

E alterações que devem ser inseridas nos links, devem ser feitas assim:

aside a {
     color: inherit;
     font-family: "Open Sans Condensed", sans-serif;
}

Ah entendi agora a mecânica! Muito obrigado!