Abrindo a mente - nth-child

Meus queridos é muito massa quando você aprende uma nova coisa e entende seu significado após vê-la por tanto tempo sem saber e entender ao certo para que servia. Aconteceu isso hoje enquanto eu estudava, isso é massa demais do fator estudar, é como se você cada ver que aparece uma coisa nova, desbloqueasse mais uma achievement na vida kkkkk ... e quando é algo que você já estava procurando entende, é melhor ainda...

Explicando contexto

Eu estou no início da caminhada para ser um programador, ainda aprender HTML e CSS para construir uma base sólida e ter uma carreira potencialmente promissora. Além de estudar e fazer curso, gosto muito de ver vídeo e replicar para aprender a fazer designs diferentes, menus, e outras coisas...

Na maioria do vídeos que vejo sempre aparecia um bendito termo que me deixava intrigado demais... "PQ ESSE BENDITO SERVE PARA ISSO?", "PQ ELE SEMPRE APARECE?", jogava no google e mesmo indo no w3 ou no developers mozilla, não conseguia compreender direito... esse aqui era o bendito termo

nth-child().

Você pode chegar para mim e dizer, "Vixe, você não sabe nada mesmo né... que besteira isso...", ai eu digo para tudo, "massa, massa...", porque ninguém nasce sabendo, e não é tão fácil associar assim quando não se vê o contexto geral.

Explicando a funcionalidade

o nth-child() é um pseudo-elemento com funcionalidade de enumerar e direcionar comandos em uma lista ou item span. 

Existem 3 comandos básicos para você adicionar estilos no css para itens específicos via CSS, são eles:

first-child; 
 last-child; 
 nth-child();

Independente se é uma ol ou uma ul...

child = filho/filha;

Então:
first-child - primeiro filho, ou seja, primeiro item de nossa lista;

last-child - último filho, ou seja, último item de nossa lista;

e

nth-child o que seria? 

n = número kkkkkkkkk simplesmente isso... four"th", fif"th",six"th"...

é isso...

nth-child - número da lista discriminado no parênteses lkkkkkkkk; 🤯🤯🤯

Mas o nth tem outras propriedades que é útil, serve não só para direcionar para apenas uma, mas também para várias linhas o mesmo comando. vamos para o exemplo.

Em nosso html seria representado assim:

que resultaria em nosso site dessa forma:

Se colocarmos o first-child ativo, ficaria assim no site e no css:

O primeiro item em negrito.

Se colocarmos last-child;, ele ficará assim:

O último item marcado.

E se colocarmos o nth-child direcionando para os itens 2, 3 e 6, ficará assim:

No nth-child, você ainda pode direcionar por exemplo de 2 em 2 (usando (2n)) ou 3 em 3(usando (3n)) e assim por diante:

3 em 3:

"Ah, nossa que besteira, cê é leigo mesmo né...?" Sim, SOU! e estou feliz por ter aprendido isso, espero que chegue a quem precise e também estava com essa dúvida...

Mano isso abriu minha mente de uma forma, era tão simples, só que eu ainda não tinha aprendido os 2 termos seguintes então não conseguia associar... assim que o professor falou isso... essa foi minha reação \/

AQUI QUEM SE DESPEDE É O JOVEM PEIXE, o DeV Leigo!