Dúvida no nth-of-type()

Há uma diferença, é claro.

ex.:

<div>
    <h1>Titulo</h1>
    <p></p>
    <p></p>
</div>

/* CSS */

div p:nth-child(2){
    background-color: red;
}
div p:nth-of-type(2){
    background-color: red;
}

• : nth-child significa selecionar um elemento se :

1.É um elemento de parágrafo

2.É o segundo filho de um pai

• :nth-of-type significa:

1.Selecione o segundo parágrafo filho de um pai

:nth-of-type é ... o que é uma boa maneira de dizer ... menos condicional .

espero ter ajudado. ;)

Então o :nth-child funciona apenas em parágrafos com tag <p>? Ou essas pseudoclasses podem pegar qualquer tag independente de ser parágrafo ou não?

O :nth-child só irar funcionar se a tag <p> for o filho exato do valor que é passado a ele ex.:

<div>
    <h1>Titulo</h1>
    <p></p>
    <p></p>
</div>

/* CSS */

div p:nth-child(1){
    background-color: red;
}

isso não irar funcionar pois <p> é o segundo filho de <div> mais com :nth-of-type funcionaria por que ele pega o primeiro elemento do tipo <p> do seu pai <div>.

Decupa na primeira resposta eu tinha esquecido de colocar um ex. mai já atualizei ela. :)

Ah, entendi o :nth-child() faz a contagem de todos os elementos, então no caso você colocou o índice 1, então ele vai pegar a tag <h1>, no caso como está declarado no css que queremos mexer na tag <p> o código não vai funcionar.

E o :nth-type-of começa a contar a partir do mesmo elemento, então no caso o índice 1 vai ser o <p> por que ela é a primeira das tags <p>.

Só uma última coisa, vou fazer um exemplo aqui para ver se eu realmente entendi, daí você me responde se está correto para eu fechar o tópico, lá vai...

Caso eu tenha esse bloco de código HTML:

<div>
    <h2></h2>
    <p></p>
    <p></p>
    <h2></h2>
    <p></p>
    <p></p>
</div>

No caso eu vou querer selecionar apenas a segunda tag <h2> , então meu CSS usando o nth-child ficaria:

div p:nth-child(4) {
    color: red;
}

Já usando o nth-type-of, meu CSS ficaria:

div p:nth-type-of(2){
    color: red;
}

Confirma para mim se está certo, foi isso que eu entendi!

Valeu, abçs

Esta correto fico feliz em ter ajudado.

Abs.