Qual'è la differenza tra: first-child e: first-of-type?

Non riesco a capire la differenza tra element:first-childeelement:first-of-type

Ad esempio, supponiamo che tu abbia un div

div:first-child
→ Tutti gli <div>elementi che sono il primo figlio del loro genitore.

div:first-of-type
→ Tutti gli <div>elementi che sono il primo <div>elemento del loro genitore.

Sembra esattamente la stessa cosa, ma funzionano in modo diverso.

Qualcuno potrebbe spiegare?

Un elemento genitore può avere uno o più elementi figlio:

<div class="parent">
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

Tra questi bambini, solo uno di loro può essere il primo. Questo è abbinato da :first-child:

<div class="parent">
  <div>Child</div> <!-- :first-child -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

La differenza tra :first-childe :first-of-typeè che :first-of-typecorrisponderà al primo elemento del suo tipo di elemento, che in HTML è rappresentato dal nome del tag, anche se quell'elemento non è il primo figlio del genitore . Finora gli elementi figlio che stiamo guardando sono stati tutti divs, ma abbi pazienza, ci arriveremo tra un po '.

Per ora, vale anche il contrario: qualsiasi :first-childè anche :first-of-typeper necessità. Poiché il primo figlio qui è anche il primo div, corrisponderà a entrambe le pseudo-classi, nonché al selettore di tipo div:

<div class="parent">
  <div>Child</div> <!-- div:first-child, div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

Ora, se cambi il tipo del primo figlio da diva qualcos'altro, ad esempio h1, sarà ancora il primo figlio, ma divovviamente non sarà più il primo ; invece, diventa il primo (e unico) h1. Se ci sono altri divelementi che seguono questo primo figlio all'interno dello stesso genitore, il primo di quegli divelementi corrisponderà div:first-of-type. Nell'esempio fornito, il secondo figlio diventa il primo divdopo che il primo figlio è stato modificato in h1:

<div class="parent">
  <h1>Child</h1>   <!-- h1:first-child, h1:first-of-type -->
  <div>Child</div> <!-- div:nth-child(2), div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

Nota che :first-childè equivalente a :nth-child(1).

Ciò implica anche che mentre ogni elemento può avere un solo elemento figlio corrispondente :first-childalla volta, può e avrà tanti figli che corrispondono alla :first-of-typepseudo-classe quanti sono i tipi di figli che ha. Nel nostro esempio, il selettore .parent > :first-of-type(con una *qualificazione implicita dello :first-of-typepseudo) corrisponderà a due elementi, non solo a uno:

<div class="parent">
  <h1>Child</h1>   <!-- .parent > :first-of-type -->
  <div>Child</div> <!-- .parent > :first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

Lo stesso vale per :last-childe :last-of-type: any :last-childè anche per necessità :last-of-type, poiché assolutamente nessun altro elemento lo segue all'interno del suo genitore. Tuttavia, poiché l'ultimo divè anche l'ultimo figlio, il h1non può essere l'ultimo figlio, nonostante sia l'ultimo del suo tipo.

:nth-child()e :nth-of-type()funzionano in modo molto simile in linea di principio quando vengono utilizzati con un argomento intero arbitrario (come :nth-child(1)nell'esempio menzionato sopra), ma dove differiscono è nel numero potenziale di elementi corrispondenti :nth-of-type(). Questo è trattato in dettaglio in Qual è la differenza tra p: nth-child (2) e p: nth-of-type (2)?

Ho creato un esempio per dimostrare la differenza tra first-childe first-of-typequi.

HTML

<div class="parent">
  <p>Child</p>
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div> 

CSS

.parent :first-child {
  color: red;
}

.parent :first-of-type {
  background: yellow;
}

.parent p:first-child {
  text-decoration: line-through;
}

// Does not work
.parent div:first-child {
  font-size: 20px;
}
// Use this instead
.parent div:first-of-type {
  text-decoration: underline;
}
// This is second child regardless of its type
.parent div:nth-child(2) {
  border: 1px black solid;
}

Per vedere l'esempio completo, visita https://jsfiddle.net/bwLvyf3k/1/

La differenza tra il tipo primo figlio e il primo figlio può essere compresa con l'esempio. Devi capire il seguente esempio creato da me e funziona davvero puoi incollare i codici nel tuo editor capirai cosa sono e come lavorano

Codice # 1 per first-of-type:

<!DOCTYPE html>
<html>
<head>
<title>clear everything</title>
<style>
p:first-of-type{
color:red;
}
</style>
<head>
<body>
<p class="p1">some text</p>
<div>
<p class="p2">some text</p>
<div>
<p class="p3">some text</p>
</div>
<p class="p4">some text</p>
</div>
<p class="p5">some text</p>
</body>
</html>

risultato

.p1, .p2, .p3 saranno in stile e il loro colore sarà rosso. anche se mettiamo .p1 dopo il secondo div sarà rosso.

Codice # 2 per il primo figlio:

<!DOCTYPE html>
<html>
<head>
<title>clear everything</title>
<style>
p:first-child{
color:red;
}
</style>
<head>
<body>
<p class="p1">some text</p>
<div>
<p class="p2">some text</p>
<div>
<p class="p3">some text</p>
</div>
<p class="p4">some text</p>
</div>
<p class="p5">some text</p>
</body>
</html>

risultato:

se mettiamo il .p2 dopo il secondo div 2 non sarà rosso però nel primo caso funzionava.