Solucionado
Salve galera, boa tarde para todos
Estou com uma dúvida que aparentemente é simples, mas não sei o que está acontecendo.... Ao alocar em cada arquivo de css separado o menu, me deparo que o:
.menu-link .ativo{
font-weight: bold;
color: #333333;
}não surge efeito na página, apenas se tirar o seletor de classe .menu-link, que daí o font-weight suporta a característica bold e fica visual a alteração. Alguém, por gentileza, saberia me explicar o por quê?
Oi Arthur, tudo bem?
A classe menu-link e a classe ativo estão juntas, ou seja, no HTML você usa dessa forma: class="menu-link ativo".
Dessa maneira, como as duas classes estão em uma só, não podemos dar espaço entre elas no arquivo CSS, pois então ele entende como classes "separadas" (entende que precisa aplicar o estilo para a classe .menu-link e para a classe .ativo). Para resolver isso, é só remover o espaço:
.menu-link.ativo{
font-weight: bold;
color: #333333;
}Espero ter ajudado, qualquer outra dúvida fico a disposição! Abraços e bons estudos!
Olá Giovanna, tudo bem e contigo?
Primeiramente, obrigado pela resposta. Mas não seria esse o problema... o meu HTML já consta com as classes em separado também:
<li class="menu__item"><a class="menu__link ativo" href="#">início</a></li>
Fiz essa alteração para o BEM, mudando também o CSS:
.menu__link{
color: #808080;
margin-right: 1.25rem;
text-decoration: none;
text-transform: lowercase;
}
.menu__link .ativo{
font-weight: bold;
color: #333333;
}Mas, ainda assim, essa questão da classe "ativo", não funciona em meu código... Apenas se apagar o seletor de claase .menu__link anterior, daí surte efeito. :(
Oi Arthur, então, no HTML ele fica com as classes separadas mesmo, está certinho o jeito que você fez!
Mas o problema está no CSS, para estilizar a classe .menu__link e .ativo juntas, você não pode dar espaço entre eles no seletores, portanto o correto seria:
.menu__link.ativo{
font-weight: bold;
color: #333333;
}Dessa forma, você vai conseguir estilizar a classe ativo que pertence a classe menu__link. Quando você usa o espaço entre elas no CSS, ele procura pela classe "menu__link" e também pela classe "ativo", para estilizar ambas. Mas não é isso que queremos, nós queremos estilizar a classe .ativo que pertence junto a classe menu__link, elas estão juntas, e não separadas.
É por isso que quando você utiliza apenas o .ativo funciona, pois assim ele vai procurar apenas por essa classe!
Espero que tenha ajudado, qualquer coisa me retorne aqui!!
Obrigado Giovanna
Agora consegui entender o erro hahaha, muito obrigado, não estava conseguindo avançar por conta disso...
Att