Halo sobat Skilvul!
Pernah denger istilah ancestor atau parent element ngga?
Dua itu nanti bakal sering dipakai lho kalau sedang bahas positioning dan sizing di CSS.
Lho. parent itu artinya “orang tua” kan?
Terus ancestor itu kalo gasalah “nenek moyang” ya?
Yap, bener banget. Anggap aja DOM dari sebuah halaman web itu seperti silsilah keluarga.
Misalnya ada kode HTML seperti ini
<!DOCTYPE html>
<html>
<head>
<title>Skilvul</title>
</head>
<body>
<h1>Belajar Coding</h1>
<main>
<nav>
<li>Kelas</li>
<li>Blog</li>
</nav>
</main>
</body>
</html>
Kita bisa buat jadi diagram seperti ini
└── html
├── head
│ └── title
└── body
├── h1
└── main
└── nav
├── li
└── li
Nah udh kelihatan kan silsilahnya.
Sekarang apa itu parent element? Ingat saja “parent” -> “orang tua” -> persis 1 level di atas di silsilah keluarga.
Berarti
-
<html>adalah parent dari<head>dan<body> -
<head>adalah parent dari<title> -
<body>adalah parent dari<h1>dan<main> -
<main>adalah parent dari<nav> -
<nav>adalah parent dari<li>
Jadi kalau dalam istilah “teknis-nya”, parent dari suatu element X adalah element lain yang membungkus element X.
Sekarang apa itu ancestor element?
Kalau kita pakai diagram silsilah keluarga tadi, ancestor element adalah element yang berada minimal 1 tingkat di atas di silsilah keluarga.
Jadi kita bisa ambil lihat bahwa
-
<html>itu adalah ancestor dari semua element di contoh tadi. -
<head>adalah ancestor dari<title> -
<body>adalah ancestor dari<h1>,<main>,<nav>, dan<li>. - …
“Eh bentar, jadi <head> itu parent sekaligus ancestornya <title> ?”
Yep. Dalam topik CSS, setiap parent itu adalah ancestor. Tapi ancestor tidak selalu berupa parent.