Pare de chutar e domine o nth-child (e similares) de uma vez por todas

#CSS #seletores-avancados #pseudo-class-child
Olá pessoal, tudo bem?
O CSS possui algumas pegadinhas. Há seletores que parecem dizer uma coisa e na verdade significam outra, o que pode deixar pessoas desenvolvedores se perguntando: "Mas porque raios esse seletor de CSS lindo e tão bem escrito não funcionou ????"
Pois é, quem nunca passou por isso ainda vai passar, mas não vai ser com a pseudo-classe nth-child e similares pois nesse vídeo eu vou te mostrar todos os truques e artimanhas dessas pseudo-classes.
Simbora
00:41 Introdução ao seletor nth-child
02:04 first-child e last-child
02:47 nth-child
05:25 nth-of-type
08:38 odd, even e fórmulas com "n"
14:28 nth-last-child
15:49 Desafio
DESAFIO:
No final desse vídeo eu passei os seguintes seletores como desafio:
p:nth-of-type(2n)
li:nth-last-child(n+3)
p:nth-last-of-type(4n)
Experimente e auto avalie seus conhecimentos.
Forte abraço
Outros links que podem ser interessantes:
Blog: serfrontend.co...
Meus cursos: serfrontend.co...
Canais em redes sociais:
Twitter: / serfrontend
Linkedin: / serfrontend
Instagram: / serfrontendcursos
Facebook: / serfrontend
Instrutor: Daniel Tapias Morales
Twitter: / tapmorales
Linkedin: / daniel-tapias-morales-...
Medium: / tapmorales
Github: github.com/tap...
📺 Playlists: / serfrontend

[@serliv]

Quer conhecer meu curso web design fundamentos, onde ensino HTML, CSS e o básico de javascript? Clique no link serfrontend.com/cursos/web-fundamentos-html-css/index.html

[@rubenszimmermann1072]

Show de aula amigão. Estou baixando todas as suas aulas. Sua didática é ótima. Parabéns e muito obrigado.

[@serliv]

baixando? baixando de onde? kkkk

[@Bolsonaro_em_Haia]

Excelente. Outro vídeo bem informativo. Eu nem havia me dado conta de que existia a contagem "last", tampouco de que a filtragem considera também o tipo de etiqueta mas a contagem não considera as classes.

[@Kapthos]

Eu achava que vc tinha que indicar a tag pai junto com o pseudo seletor, nesse primeiro caso eu achei que seria...."div:nth-child(x)" já que eu quero selecionar o filho X da div e não dizer que eu quero selecionar o filho "X" que se enquadra naquele type (p nesse caso). Sou novo na programação e seu canal ta me ajudando muito. Esse canal merece muito mais sucesso! :D

[@serliv]

Muito obrigado Juan. E que bom que ajudou a esclarecer esse assunto. Forte abraço

[@ricardocollinjunior4827]

De todos os professores que acompanho , a sua didática é a melhor disparado !!!! Sucesso

[@serliv]

Muito obrigado Ricardo 😊🤗 muito feliz com seu feedback

[@gabrielluizreis]

Cara o last-child me salvou rsrsrs, eu tenho um relatorio que tem varias tabelas e utilizo um componente global montar as mesmas, porém algumas tem um subtitulo e outras não, e em casos que possuem subtitulo o bacgrund é diferente, ai usando o last-child consegui aplicar da forma correta, muito bom o video e didatica, parabéns!

[@serliv]

Muito obrigado Gabriel. Forte abraço

[@deegas]

Olha, nao conseguia o seu canal e tive uma duvida sobre nth:child(2n) e que explicação boa a sua. Parabens. Ganhou mais um seguidor

[@serliv]

Obaaa. Obrigado Dee Rodrigo. Abração

[@brunoxepabr]

Explicação e didática melhor que muitos cursos renomados por aí! Parabéns pelo conteúdo e pelo bom trabalho!

[@serliv]

Eu que agradeço pelo feedback e carinho Bruno. Abração

[@josimarmiranda9722]

Daniel, acrecentei a propriedade border-bottom: 1px solid blue no p:nth-child(odd) e também apareceu a borda em baixo do lorem (par).

[@serliv]

Não sei responder pq preciso ver o código, mas garanto que o odd seleciona apenas números ímpares

[@kleberkibe]

Sensacional esse vídeo hein !!!!! 2 palavras: Para-béns.

[@serliv]

Boa Kleber. Muito obrigado pelo feedback. Valeu mesmo. Abra são 🤣

[@tonycarlos4538]

Obrigado por mais essas dicas professor. Parabéns!

[@serliv]

Eu que agradeço pela força Tony. Abração

[@LucasPiresSCCP]

Muito esclarecedor professor, estava quebrando a cabeça pra entender isso e você explicou de forma bem tranquila e clara! Muito bom.

[@serliv]

Muito obrigado pelo feedback Lucas. Forte abraço

[@ninguem6879]

Muito obrigado pelo video! Estou aprendendo css e não consigo entender alguns conceitos apenas lendo

[@serliv]

Eu que agradeço pela mensagem. Se tiver dúvidas, pode mandar aqui. Eu também tenho uma playlist bem completa sobre HTML e CSS aqui no youtube que aborda o css do básico até coisas intermediárias para o avançado. Dá uma conferida lá se você quiser

[@WeulerdeOliveiraVieira]

Simplificou mesmo obrigado pelo vídeo.

[@serliv]

TMJ

[@adri2884]

Brabo apenas

[@serliv]

Valeu Adri... abração

[@devmoraes]

Show amigo

[@serliv]

Muito obrigado

[@diegocammilo_]

Que aula!!

[@serliv]

Obrigado Diego. Muito feliz que tenha gostado

[@017chestera]

Mto bom

[@igormdrsr]

Professor, esse tipo de seletor não seria muito abrangente? Há algum exemplo prático pra ilustrar melhor quando usar essa ferramenta?

[@serliv]

de bate e pronto eu não sei dizer. Mas é bom ter conhecimento de sua existência para uma possivel necessidade

[@philos22]

quem tiver dúvida ainda só estudar sobre conjuntos.

[@pedrocunha1062]

sobre nth-of-type se eu tiver uma div com a mesma classe que um paragrafo, por exemplo, como fica a resolução?

[@serliv]

faça um teste e olhe com seus próprios olhos. coloque no seu html um paragrafo com uma classe "teste". Depois coloque um div sem classe, depois coloque uma div com a classe "teste". Depois coloque um paragrafo com a classe "teste". Mude algo nos seguintes seletores: - p:nth-of-type(1), - p:nth-of-type(2), - div:nth-of-type(1), - .teste:nth-of-type(1) {