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

Poderia explicar melhor quando o botão está ativo?

Referente ao curso CSS Grid: simplificando layouts, no capítulo Estilizando o cabeçalho, menu e rodapé e atividade Estilizando o cabeçalho

por Veronica Onodera Xavier de Souza
| 20.5k xp | 13 posts

Não entendi muito bem como dizer que um botão está ativo. Pq utilizamos um "." (ponto) e escrevemos ativo? Pq só o primeiro link pode estar estilizado como ativo? e se formos entrar nas outras páginas? Gostaria de compreender como faço isso. Minha dúvida é tudo relacionado a esse .ativo. Se alguém puder esclarecer como funciona ele, fico muito grata.

Eu sei que podemos existe uma pseudo-classe :active, e pq não usamos no caso? Qual a diferença da aplicação das duas?

.menu__link:hover, .menu__link.ativo {
    border-bottom: 2px solid #0073e6;
}

O ativo seria uma classe? No HTML pelo menos ele está da seguinte maneira:

<a class="menu__link ativo" href="#">
                        <i class="fas fa-home"></i>
                        Início
                    </a>
2 respostas
solução!
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Veronica, tudo bem?

A ideia dessa estilização é adicionar uma variação aos links que compreendem à lista de links com a classe menu__link. A classe ativo é uma classe que é adicionada para criar uma variação a somente a classe que estiver adicionada como ativo.

Nesse caso, o instrutor quis definir a página inicial como ativa, já que as demais estão vazias.

O seletor :active adiciona estilos ao link que for clicado, você pode estilizar, um exemplo seria:

.menu__link:active {
    background-color: tomato;
}

Mas como os links estão vazios, sem páginas, ele pisca e não mantém o estilo.E ela não foi utilizada, acredito, por não termos mais outras páginas, e clicando nelas, o estilo pisca e não "segura". Mas quando se tem links que são direcionados a outras páginas, a pseudo-classe active pode ser usada.

Essa metodologia de pensar em classes e variações de classes é a BEM, segue link para saber mais: https://www.alura.com.br/artigos/criando-componentes-css-com-padrao-bem

Qualquer dúvida, é só falar!

por Henrique
| 119.6k xp | 52 posts

É isso aí que a Laís falou! Só complementando, o ativo é uma classe, assim como o menu__link. Quando escrevemos .menu__link.ativo estamos dizendo, basicamente, "Quero estilizar a classe .ativo, porém, só quando coexista com a classe .menu__link.". O que significa que se você tiver alguma outra tag com a classe ativo, porém sem a classe menu__link, ela não será estilizada por este css.

Espero ter ajudado, bons estudos!