Apa perbedaan antara: first-child dan: first-of-type?

Saya tidak bisa membedakan antara element:first-childdanelement:first-of-type

Misalnya, Anda memiliki div

div:first-child
→ Semua <div>elemen yang merupakan anak pertama dari induknya.

div:first-of-type
→ Semua <div>elemen yang merupakan <div>elemen pertama dari induknya.

Ini sepertinya hal yang persis sama, tetapi cara kerjanya berbeda.

Bisakah seseorang menjelaskan?

Elemen induk dapat memiliki satu atau lebih elemen anak:

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

Di antara anak-anak ini, hanya satu yang bisa menjadi yang pertama. Ini cocok dengan :first-child:

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

Perbedaan antara :first-childand :first-of-typeis yang :first-of-typeakan cocok dengan elemen pertama dari jenis elemennya, yang dalam HTML diwakili oleh nama tag-nya, meskipun elemen tersebut bukan anak pertama dari induknya . Sejauh ini elemen anak yang kita lihat semuanya telah divs, tapi bersabarlah, saya akan membahasnya sebentar lagi.

Untuk saat ini, kebalikannya juga berlaku: apapun :first-childjuga :first-of-typekarena kebutuhan. Karena anak pertama di sini juga yang pertama div, ini akan cocok dengan kedua pseudo-class, serta selektor tipe div:

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

Sekarang, jika Anda mengubah jenis anak pertama dari yang divlain, seperti h1, itu akan tetap menjadi anak pertama, tetapi jelas bukan lagi yang pertama div; sebaliknya, ini menjadi yang pertama (dan satu-satunya) h1. Jika ada divelemen lain yang mengikuti anak pertama ini dalam induk yang sama, elemen pertama divakan cocok div:first-of-type. Dalam contoh yang diberikan, anak kedua menjadi anak pertama divsetelah anak pertama diubah menjadi 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>

Perhatikan bahwa :first-childitu setara dengan :nth-child(1).

Ini juga menyiratkan bahwa meskipun setiap elemen mungkin hanya memiliki satu elemen turunan yang cocok :first-childpada satu waktu, elemen tersebut dapat dan akan memiliki banyak turunan yang cocok dengan :first-of-typepseudo-class sebanyak jumlah tipe turunan yang dimilikinya. Dalam contoh kita, selektor .parent > :first-of-type(dengan *kualifikasi implisit yang memenuhi syarat :first-of-typepseudo) akan mencocokkan dua elemen, bukan hanya satu:

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

Hal yang sama berlaku untuk :last-childdan :last-of-type: ada :last-childjuga :last-of-typekarena kebutuhan , karena sama sekali tidak ada elemen lain yang mengikutinya di dalam induknya. Namun, karena yang terakhir divjuga merupakan anak terakhir, maka h1tidak bisa menjadi anak terakhir, meskipun merupakan yang terakhir dari jenisnya.

:nth-child()dan :nth-of-type()berfungsi sangat mirip pada prinsipnya saat digunakan dengan argumen bilangan bulat arbitrer (seperti dalam :nth-child(1)contoh yang disebutkan di atas), tetapi perbedaannya terletak pada jumlah potensi elemen yang cocok :nth-of-type(). Hal ini dibahas secara rinci dalam Apa perbedaan antara p: n-anak (2) dan p: n-jenis (2)?

Saya telah membuat contoh untuk menunjukkan perbedaan antara first-childdan di first-of-typesini.

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;
}

Untuk melihat contoh lengkapnya, silakan kunjungi https://jsfiddle.net/bwLvyf3k/1/

Perbedaan antara first-child-type dan first-child dapat dipahami dengan contohnya. Anda perlu memahami contoh follwing yang saya buat dan ini benar-benar berfungsi, Anda dapat menempelkan kode di editor Anda, Anda akan memahami apa itu dan bagaimana caranya mereka bekerja

Kode # 1 untuk tipe pertama:

<!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>

hasil

.p1, .p2, .p3 akan ditata dan warnanya akan merah. bahkan jika kita meletakkan .p1 setelah div kedua akan menjadi merah.

Kode # 2 untuk anak pertama:

<!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>

hasil:

jika kita meletakkan .p2 setelah div kedua 2 itu tidak akan menjadi merah namun dalam kasus pertama itu berhasil.