Bom dia. Gostaria de saber se eu escrever:
blockquote :nth-child(even)
é o mesma coisa de escrever:
blockquote:nth-of-type(even)
Pois para mim, pareceu a mesma coisa, vendo que os dois selecionam somente o elemento blockquote.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Bom dia. Gostaria de saber se eu escrever:
blockquote :nth-child(even)
é o mesma coisa de escrever:
blockquote:nth-of-type(even)
Pois para mim, pareceu a mesma coisa, vendo que os dois selecionam somente o elemento blockquote.
Bom dia, Felipe! Como vai?
A diferença entre eles é que o :nth-child selecionará o n-ésimo filho enquanto o :nth-of-type selecionará o n-ésimo filho de determinado tipo.
Exemplo prático:
:nth-child// Especifica um background para todo elemento <p>
// que é o segundo filho do seu pai:
p:nth-child(2) {
background: red;
}<div>
<div></div>
<p>elemento selecionado!</p>
</div>:nth-of-type// Especifica um background para todo elemento <p>
// que é o segundo filho p do seu pai:
p:nth-of-type(2) {
background: red;
}<div>
<p></p>
<div></div>
<p>elemento selecionado!</p>
</div>Veja que no primeiro caso, só selecionamos o elemento p caso ele seja o segundo filho independente dos tipos dos filhos e no segundo caso, selecionamos sempre o segundo filho p a aparecer.
Para mais informações e detalhes, vc pode acessa a documantação referente à esses seletores no W3Schools!
https://www.w3schools.com/cssref/sel_nth-child.asp
https://www.w3schools.com/cssref/sel_nth-of-type.asp
Grande abraço e bons estudos!