Galera, Bom dia.
<!-- Menu lateral -->
<aside class="menu__container">
<ul class="menu__lista">
<li>
<a class="menu__itens" href="#">
<i class="icone__inicio icone-item"></i>
<span>Início</span></a>
</li>
Alguém pode me explicar por qual razão a tag <a> seria o pai direto dos elementos e não a tag <li>?
Ainda estou aprendendo sobre.
Fui no chat da Luri Beta, mas ainda continuo com dúvida
Oi, Ruan, tudo bem?
A tag <a> é considerada o pai direto dos elementos <i> e <span> porque ela os envolve diretamente no código HTML. Isso significa que, para aplicar estilos específicos ou alterações de layout que afetam diretamente esses dois elementos (ícone e texto), você precisa acessar a tag <a>, que é o container imediato deles.
A tag <li>, por outro lado, é o pai da tag <a> e serve como um container para toda a estrutura do item do menu, mas não interage diretamente com os elementos <i> e <span> para propósitos de estilização específica, como alinhamento ou disposição flex.
No contexto do curso, ao trabalharmos com Flexbox para modificar o layout de elementos, faz sentido focar na tag <a> para aplicar propriedades como display: flex e flex-direction: column. Isso permite que você controle como o ícone e o texto são exibidos dentro de cada item do menu, mudando o eixo de alinhamento de horizontal para vertical, conforme necessário.
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!