Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Como usar a pseudoclasse :visited com os mesmos seletores nos links?

Fiz todos esses links com o mesmo seletor class="footer__links__link":

Insira aqui a descrição dessa imagem para ajudar na acessibilidade :

<footer>
        <img src="img/Logo_alura.png" alt="Alura+" class="footer__logo">
        <div>
            <ul class="footer__links">
                <li><a class="footer__links__link" href="#">Idioma</a></li>
                <li><a class="footer__links__link" href="#">Dispositivos compatíveis</a></li>
                <li><a class="footer__links__link" href="#">Contrato de assinatura</a></li>
                <li><a class="footer__links__link" href="#">Política de privacidade</a></li>
                <li><a class="footer__links__link" href="#">Proteção de dados no Brasil</a></li>
                <li><a class="footer__links__link" href="#">Anúncios personalizados</a></li>
                <li><a class="footer__links__link" href="#">Ajuda</a></li>
            </ul>
        </div>
        <div class="footer__descricao">
            <p>® 2021 Alura, Alura+ e Alura Língua. Todos os direitos reservados. Serviço de assinatura paga. Conteúdo sujeito a disponibilidade.</p>
            <br>
            <p>Alura+ é um serviço pago, baseado em assinatura e sujeito a termos e condições. O serviço Alura+ é comercializado por Aovs Sistemas de Informática S.A., Rua Vergueiro, 3185 - Liberdade, São Paulo - SP, 04101-300, Brasil e CNPJ 05.555.382/0001-33</p>
        </div>
    </footer>
</html>

Logo, a pseudo-classe :visited fica aplicada para todos os links:

.footer__links__link:visited {
    color: var(--visited);
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Deveria criar um seletor individualmente para cada <a>? Teria como enumerar os seletores (class="footer__links__link1",class="footer__links__link2", class="footer__links__link3", ...) sem precisar digitar muito no style.css?

1 resposta
solução!

Olá, Akhenaton!

Para que cada classe possua sua especifidade, devemos criar um seletor individual para cada link, dessa forma, usaremos uma classe para cada tag como sugerido por você e demonstrado no exemplo abaixo:

.footer__links__link:visited {
    color: var(--cor-legal)
}
.footer__links__link2:visited {
    color: var(--cor-legal)
}
.footer__links__link3visited {
    color: var(--cor-legal)
}
`

Caso queria diminuir a quantidade de conteúdo no style.css, recomendo criar um novo arquivo css especificamente para o rodapé e conectar com o restante do projeto, dessa forma não sobrecarregamos o conteúdo no style.css e deixamos o projeto mais organizado.

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓