Inheritance

Atur color pada elemen body, dan seluruh teks di dalamnya ikut berubah — tanpa satu selector pun menargetkan paragraf atau tombol di dalamnya. Perilaku ini disebut inheritance: browser meneruskan sebagian nilai dari elemen induk ke elemen anak selama tidak ada deklarasi yang mengatur property tersebut. Inheritance menjelaskan mengapa satu rule kecil bisa menghias banyak elemen sekaligus, sekaligus menjelaskan mengapa margin dan border tidak ikut menular. Chapter ini memetakan property mana yang mewarisi, mana yang tidak, dan posisi nilai warisan dalam penilaian CSS.

Property yang Diwariskan dan yang Tidak #

Tidak semua property berperilaku sama. Browser membagi mereka menjadi dua kelompok besar:

Pembagian ini bukan keputusan acak, melainkan konsekuensi logis dari dua jenis nilai:

• Tipografi mengalir ke bawah. Nilai seperti color dan font-family mengatur isi dokumen. Bila mereka mewarisi, satu rule pada body cukup untuk membuat seluruh halaman konsisten, dan penulis tidak perlu mengulang deklarasi di setiap elemen.
• Kotak bersifat per elemen. Nilai seperti border, margin, dan width mengatur wadah masing-masing elemen. Bayangkan bila border ikut mewariskan: satu garis pada div luar akan menggariski setiap elemen di dalamnya, dan tata letak pun berantakan karena margin menumpuk di setiap tingkat.

Pola fondasi yang memanfaatkan sifat warisan ini akan kita pakai di hampir semua proyek:

body {
  font-family: "Segoe UI", system-ui, sans-serif;
  line-height: 1.6;
  color: #1f2933;
}

Contoh nyatanya, font-family dan border ditulis pada elemen luar yang sama, dengan beberapa div bersarang di dalamnya:

Ketiga property pada rule body itu mewarisi, sehingga paragraf, tautan, isi tabel, hingga teks di dalam kartu memakai nilai yang sama tanpa satu selector tambahan pun. Perhatikan juga bahwa pewarisan menjangkau seluruh keturunan, bukan berhenti pada anak langsung — teks yang bersarang dua tingkat pun mengikuti rule induknya.

Sementara itu, border pada demo ditulis pada rule yang sama tetapi tidak ikut menular, karena tabel warisan browser membedakan property satu per satu. Bila garis diinginkan pada setiap kotak di dalam, ia harus dideklarasikan pada elemen masing-masing. Pola serupa berlaku untuk seluruh kolom kiri tabel di atas: dideklarasikan sekali pada induk, nilainya menyebar ke semua keturunan.

Nilai Warisan Berprioritas Paling Rendah #

Inheritance hanya mengisi kekosongan. Browser memakai nilai warisan hanya bila tidak ada satu pun deklarasi yang menargetkan property tersebut pada elemen. Konsekuensinya tegas: deklarasi langsung apa pun mengalahkan nilai warisan, bahkan deklarasi dari selector paling ringan sekalipun:

* {
  color: #475569;
}

.kartu {
  color: #14503a;
}

Selector * berbobot (0, 0, 0) — seminimal mungkin — tetapi tetap mengalahkan pewarisan karena ia adalah deklarasi langsung pada setiap elemen. Nilai warisan tidak ikut dinilai di meja cascade; ia hanya masuk ketika meja itu kosong.

Inilah alasan teknik reset yang menargetkan semua elemen tetap berpengaruh meski bobotnya kecil, dan alasan mengapa teks di dalam tombol tidak mengikuti color dari induknya: stylesheet bawaan browser menulis deklarasi langsung untuk tombol tersebut.

Mengendalikan Warisan dengan Kata Kunci #

Kadang kita ingin mengubah perilaku warisan secara eksplisit: menyuruh property ikut mewarisi meskipun memang tidak semestinya, atau memutus pewarisan yang sedang berjalan. CSS menyediakan kata kunci global untuk itu — inherit, initial, unset, dan revert — yang bekerja pada semua property. Kita bedah keempatnya pada chapter berikutnya.

Ringkasan #

Inheritance meneruskan nilai dari elemen induk ke keturunannya, namun hanya untuk property tertentu: tipografi seperti color, font-family, dan line-height mewarisi, sementara property kotak seperti margin, border, dan display tidak. Nilai warisan berdiri di urutan paling bawah — deklarasi langsung apa pun mengalahkannya, sekecil apa pun bobot selector-nya. Dengan pemahaman ini, kita siap mengendalikan arah nilai secara manual memakai kata kunci inherit, initial, unset, dan revert.