Inheritance

Cascade menyelesaikan konflik deklarasi pada satu elemen; inheritance bekerja pada arah yang berbeda. Ketika sebuah properti tidak dideklarasikan pada elemen, dan properti tersebut bersifat mewarisi, elemen mengambil nilai computed dari induknya. Mekanisme inilah yang membuat kita cukup menetapkan color dan font-family sekali pada body lalu seluruh halaman mengikuti, sementara border dan margin dengan sengaja tidak ikut mengalir. Pada Chapter ini kita memilah properti yang mewarisi dan yang tidak, membaca pewarisan pada pohon DOM, serta melihat posisi warisan di dalam urutan keputusan cascade.

Properti yang Mewarisi dan yang Tidak #

Pembagian mewarisi/tidaknya sebuah properti dirancang sesuai fungsinya. Properti yang menyangkut teks diwariskan agar isi dokumen tampil konsisten; properti yang menyangkut kotak tidak diwariskan agar setiap elemen menyusun kotaknya sendiri. Daftar resminya dapat dilihat pada Inheritance di MDN .

* text-decoration secara teknis diwariskan sebagai propagasi garis, bukan nilai properti biasa — perilaku khusus ini kita lewatkan untuk saat ini.

Jika border ikut mewarisi, satu border pada body akan menggandakan diri ke setiap elemen sampai halaman penuh kotak. Karena tidak mewarisi, border tetap berada di tempat kita menuliskannya.

Membaca Pewarisan pada Pohon DOM #

Demo chapter ini menaruh dua paragraf di dalam satu kartu .kartu yang menetapkan empat properti kotak dan dua properti teks:

.kartu {
  color: rgb(76, 29, 149);
  line-height: 1.5;
  font-size: 16px;
  background-color: rgb(243, 232, 255);
  border: 2px solid rgb(147, 51, 234);
}

.sendiri { color: rgb(21, 128, 61); }

<div class="kartu">
  <p class="anak">
    Paragraf ini tidak punya deklarasi apa pun.
  </p>
  <p class="sendiri">
    Paragraf ini menetapkan color sendiri.
  </p>
</div>

Hasil di Browser:

Kedua paragraf tampil dengan line-height 24px (1,5 × font-size 16px) yang
diwarisi dari .kartu.
Paragraf pertama mewarisi warna ungu (color: rgb(76, 29, 149)); border-style-nya
tetap none dan background-color-nya tetap transparan (rgba(0, 0, 0, 0)) karena
border dan background tidak diwariskan.
Paragraf kedua tampil hijau (color: rgb(21, 128, 61)) dari deklarasinya sendiri,
tetapi line-height-nya tetap 24px hasil warisan.

Mari kita telaah apa yang terjadi pada kedua paragraf:

1. color pada .kartu: properti teks yang mewarisi. Kedua paragraf tidak kehilangan akses ke nilai ini, sehingga paragraf pertama tampil ungu mengikuti induknya.
2. line-height: 1.5 pada .kartu: nilai dihitung lebih dulu pada .kartu menjadi 24px, lalu nilai computed 24px itulah yang mengalir ke anak — bukan angka 1.5 yang dihitung ulang dari nol.
3. border: 2px solid ... pada .kartu: properti kotak yang tidak mewarisi. Paragraf pertama memeriksa dirinya sendiri: tidak ada deklarasi border-style, tidak ada induk yang mewariskan, sehingga kembali ke nilai awal none.
4. background-color pada .kartu: sama-sama tidak mewarisi, sehingga paragraf pertama tetap transparan ( rgba(0, 0, 0, 0) ) di atas latar lilac induknya.
5. .sendiri { color: ... }: deklarasi langsung pada elemen memenangkan cascade di elemen itu, sehingga paragraf kedua tampil hijau. Warisan hanya mengisi kekosongan — ia tidak pernah mengalahkan deklarasi yang berlaku.

Posisi Warisan dalam Urutan Keputusan #

Inheritance bukan tahap cascade, melainkan pengisi nilai ketika cascade selesai dan tidak ada deklarasi yang berlaku untuk properti tersebut pada elemen. Urutannya: cascade memilih nilai pemenang dari semua deklarasi yang cocok; bila tidak ada pemenang, properti mewarisi (bila sifatnya mewarisi) atau mengambil nilai awal (bila tidak). Karena itu deklarasi langsung selalu mengalahkan warisan, selemah apa pun selectornya — bahkan selector (0, 0, 1) pun cukup.

Warisan mengalir melewati pohon DOM, bukan hanya satu tingkat: cucu menerima nilai dari induk langsungnya, yang sebelumnya menerima dari induk di atasnya. Karena nilai yang dialirkan adalah nilai computed, rantai panjang tetap konsisten — font-size yang telah dihitung pada induk menjadi titik awal anak, dan line-height yang mengalir berupa hasil akhir seperti 24px pada demo. Pola ini membuat pengaturan tipografi pada body merambat ke seluruh dokumen tanpa satu pun deklarasi tambahan.

Demo lengkap membawa data-expected untuk color, line-height, border-style, dan background-color pada kedua paragraf, sehingga perilaku warisan dan non-warisan tersebut diverifikasi otomatis. Bagaimana memaksa elemen mewarisi atau kembali ke nilai awal — dengan kata kunci inherit, initial, dan unset — kita bahas pada Chapter Initial, Inherit, dan Unset .