Olá Leandro tudo bem?
Neste caso ao aplicar o estilo no "pai", que no código seria a tag nav
, e referenciou pela classe .rodapePrincipal-navMap-list
no CSS, ele classificou como se as tags que estão abaixo dele (h4
e a
) fossem seus filhos
O que muda para diferenciar os blocos entre os h4
são as características que a tag h4
tem, que foram aplicadas em cada uma de suas classes .navmap-list-title
ou seja tamanho de letra maior, cores, mas em relação à aplicação do flex, todos os filhos estão obedecendo as mudanças
Na aula primeiro o professor deixa eles todos alinhados com a propriedade display: flex
e como padrão o CSS aplicou como row
(alinhados) todas as tags ficaram uma ao lado da outra.
Depois o professor aplica o estilo em coluna retirando o padrão (row) e aplicando column
com o flex-direction: column
o que aconteceu foi que ficaram um embaixo do outro,
Desta forma o Professor pode alterar as características de todos a partir da utilização da classe .rodapePrincipal-navMap-list
da tag nav
<nav class="rodapePrincipal-navMap-list">
<h4 class="navmap-list-title navmap-list-title-backend">Linguagens Backend</h4>
<a class="rodapePrincipal-navMap-link" href="#">Java</a>
<a class="rodapePrincipal-navMap-link" href="#">PHP</a>
<a class="rodapePrincipal-navMap-link" href="#">Pascal</a>
<a class="rodapePrincipal-navMap-link" href="#">Scala</a>
<a class="rodapePrincipal-navMap-link" href="#">Python</a>
<a class="rodapePrincipal-navMap-link" href="#">Java Web</a>
<a class="rodapePrincipal-navMap-link" href="#">Assembly</a>
<a class="rodapePrincipal-navMap-link" href="#">Lógica de programação</a>
<h4 class="navmap-list-title navmap-list-title-frontend">Linguagens Frontend</h4>
<a class="rodapePrincipal-navMap-link" href="#">Flexbox</a>
<a class="rodapePrincipal-navMap-link" href="#">Desenvolvimento Web</a>
<a class="rodapePrincipal-navMap-link" href="#">Javascript</a>
<a class="rodapePrincipal-navMap-link" href="#">AngularJS</a>
<a class="rodapePrincipal-navMap-link" href="#">ReactJS</a>
<a class="rodapePrincipal-navMap-link" href="#">Polymer</a>
<h4 class="navmap-list-title navmap-list-title-framework">Frameworks</h4>
<a class="rodapePrincipal-navMap-link" href="#">Ruby on Rails</a>
<a class="rodapePrincipal-navMap-link" href="#">VRaptor</a>
<a class="rodapePrincipal-navMap-link" href="#">SpringMVC</a>
<a class="rodapePrincipal-navMap-link" href="#">NodeJS</a>
<a class="rodapePrincipal-navMap-link" href="#">Django</a>
<a class="rodapePrincipal-navMap-link" href="#">Bootstrap3</a>
<h4 class="navmap-list-title navmap-list-title-bancoDeDados">Banco de dados</h4>
<a class="rodapePrincipal-navMap-link" href="#">MySQL</a>
<a class="rodapePrincipal-navMap-link" href="#">MariaDB</a>
<a class="rodapePrincipal-navMap-link" href="#">Postegres</a>
</nav>
Nesta documentação tem algumas informações sobre o CSS para estilos em cascata:
Espero ter ajudado
Até mais