Kenapa style CSS-ku gak ngefek? Pelajari bagaimana browser menentukan style mana yang akan diterapkan jika ada konflik, melalui konsep The Cascade, Spesifisitas Selector, dan Inheritance (Pewarisan).
17m bacaanKuis WajibMicro Badge Lesson
Memahami ini adalah kunci buat ngerti kenapa style tertentu "menang" atau "kalah" dari style lain.
Pernah gak sih kamu udah nulis aturan CSS buat ngubah warna teks jadi biru, tapi kok teksnya tetep item? Atau kamu ngasih margin ke satu elemen, eh elemen anaknya malah ikutan punya margin padahal gak kamu suruh? Nah, kejadian-kejadian kayak gini itu ada penjelasannya di "aturan main" CSS.
Ada tiga konsep utama yang nentuin gimana browser mutusin style mana yang bakal diterapin ke sebuah elemen kalau ada beberapa aturan CSS yang nargetin elemen yang sama atau berhubungan:
The Cascade (Efek Mengalir/Bertingkat): Urutan di mana aturan CSS dibaca dan diprioritaskan.
Specificity (Spesifisitas Selektor): "Kekuatan" atau "bobot" dari sebuah selektor CSS. Selektor yang lebih spesifik biasanya menang.
Inheritance (Pewarisan): Beberapa properti CSS secara otomatis "diwariskan" dari elemen induk ke elemen anaknya.
Yuk, kita kupas satu per satu biar gak bingung lagi kenapa CSS-mu kadang "bandel"!
1. The Cascade: Siapa Cepat (atau Siapa Datang Terakhir) Dia Dapat?
"Cascade" di CSS itu artinya aturan-aturan style itu "mengalir" dari berbagai sumber dan digabungin jadi satu set aturan final buat tiap elemen. Kalau ada konflik (misalnya, dua aturan ngasih nilai color yang beda ke elemen yang sama), browser punya urutan buat nentuin mana yang menang:
Origin (Asal Stylesheet): Ada beberapa "asal" stylesheet:
User Agent Stylesheet (Browser): Setiap browser punya style default bawaan buat elemen HTML (misal, link warnanya biru dan ada garis bawah). Ini prioritasnya paling rendah.
Author Stylesheet (Kamu!): Ini adalah style yang kamu tulis, baik di file CSS eksternal, internal (<style>), atau inline (style="..."). Ini yang paling sering kita urusin.
User Stylesheet (Pengguna): Beberapa browser ngebolehin pengguna buat nambahin stylesheet kustom mereka sendiri buat ngubah tampilan website (misal, buat aksesibilitas). Ini bisa nimpa style dari Author, tapi jarang dipake umum.
Urutan dalam Kode (Source Order): Kalau ada dua aturan CSS dari asal yang sama (misal, dua-duanya dari file CSS eksternalmu) dan punya spesifisitas yang sama (nanti kita bahas spesifisitas), maka aturan yang ditulis belakangan (lebih bawah) di kode CSS-mu yang bakal menang.
css
/* File style.css */p { color: blue; /* Aturan pertama */}p { color: red; /* Aturan kedua, ditulis setelahnya, ini yang bakal dipake */}/* Hasilnya: Semua paragraf akan berwarna merah */
Ini juga berlaku buat urutan tag <link> di HTML. Kalau kamu punya dua file CSS yang nge-style elemen yang sama dengan spesifisitas sama, file CSS yang di-link belakangan yang aturannya bakal lebih dominan.
Spesifisitas Selector: Ini faktor yang paling sering jadi penentu. Akan dibahas detail di bawah.
!important: Ini kayak "kartu truf" darurat. Kalau kamu nambahin !important di akhir sebuah deklarasi (misal, color: green !important;), deklarasi itu bakal ngalahin hampir semua aturan lain, gak peduli asalnya, urutannya, atau spesifisitasnya (kecuali !important lain dari asal yang sama dengan spesifisitas lebih tinggi atau urutan belakangan).
PERHATIAN! Sebisa mungkin HINDARI penggunaan !important. Dia bikin alur cascade jadi susah ditebak dan kode jadi susah di-debug atau di-override di masa depan. Pake !important itu biasanya tanda kalau ada masalah sama struktur CSS atau spesifisitas selektormu. Cuma pake kalau bener-bener kepepet dan gak ada cara lain.
2. Specificity (Spesifisitas Selektor): Siapa Lebih "Detail", Dia Menang!
Spesifisitas itu kayak "skor" atau "bobot" yang dikasih ke tiap selektor CSS. Kalau ada beberapa aturan CSS yang nargetin elemen yang sama, browser bakal ngitung skor spesifisitas masing-masing selektor, dan selektor dengan skor spesifisitas paling tinggi yang aturannya bakal dipake.
Secara umum, hierarki kekuatan spesifisitas dari yang paling tinggi ke paling rendah adalah:
Inline Styles (style di atribut style elemen HTML) - Paling tinggi skornya.
Contoh: <p style="color: purple;">
ID Selectors (#id) - Skornya tinggi.
Contoh: #konten-utama { background: white; }
Class Selectors (.class), Attribute Selectors ([type="text"]), dan Pseudo-classes (:hover) - Skornya di tengah-tengah.
Universal Selector (*) dan Combinators (+, >, ~, (spasi)) - Gak nambahin skor spesifisitas sendiri, tapi ngaruh ke perhitungan kalau digabung sama selektor lain.
Cara Ngitung Skor Kasarnya (buat perbandingan):
Bayangin ada tiga kolom skor: [ID] - [CLASS/ATTR/PSEUDO-CLASS] - [TYPE/PSEUDO-ELEMENT]
Tiap ID selector nambah 1 ke kolom [ID].
Tiap class, attribute, atau pseudo-class selector nambah 1 ke kolom [CLASS].
Tiap type atau pseudo-element selector nambah 1 ke kolom [TYPE].
Bandingin dari kolom [ID] dulu. Mana yang lebih gede, itu yang menang. Kalau sama, bandingin kolom [CLASS]. Kalau masih sama juga, baru bandingin kolom [TYPE]. Kalau semua kolom sama, baru deh urutan di kode (source order) yang nentuin. Inline style otomatis menang dari semua ini (kecuali ada !important).
Contoh Perbandingan Spesifisitas:
p { color: blue; } -> Skor [0]-[0]-[1]
.artikel p { color: green; } -> Skor [0]-[1]-[1] (ada .artikel dan p)
#sidebar .artikel p { color: red; } -> Skor [1]-[1]-[1] (ada #sidebar, .artikel, dan p)
Kalau elemen <p> yang sama kena tiga aturan di atas, yang bakal dipake adalah color: red; karena skor ID-nya paling tinggi.
Tips Spesifisitas:
Usahakan selektormu sespesifik yang dibutuhkan, tapi jangan terlalu spesifik kalau gak perlu. Selektor yang terlalu panjang dan spesifik bisa susah di-override nantinya.
Lebih baik pake class buat styling daripada ID kalau gak bener-bener butuh keunikan ID.
3. Inheritance (Pewarisan): Sifat Turunan dari Induk ke Anak
Beberapa properti CSS secara otomatis diwariskan (inherited) dari elemen induk (parent) ke elemen anaknya. Artinya, kalau kamu ngasih style ke parent, anak-anaknya bakal "dapet" style itu juga tanpa perlu kamu tulis ulang aturannya buat si anak.
Properti Apa Aja yang Diwariskan?
Umumnya properti yang berhubungan sama teks: color, font-family, font-size, font-weight, font-style, line-height, text-align, letter-spacing, word-spacing, dll.
Properti visibility juga diwariskan.
Properti list-style (buat <ul>/<ol>) juga diwariskan ke <li>.
Properti Apa Aja yang GAK Diwariskan?
Umumnya properti yang berhubungan sama Box Model: width, height, padding, margin, border.
Properti background (dan variasinya).
Properti position, top, left, float, dll.
Contoh Inheritance:
html
<div style="color: blue; font-family: Arial;"> <p>Paragraf ini teksnya akan jadi biru dan font-nya Arial (mewarisi dari div).</p> <em>Teks emphasis ini juga biru dan Arial.</em> <button>Tombol ini teksnya TIDAK otomatis biru atau Arial (properti ini gak diwariskan ke button secara default).</button></div>
Mengontrol Inheritance:
Kamu bisa "maksa" properti buat diwariskan pake nilai inherit.
Contoh: button { color: inherit; font-family: inherit; } (biar tombol ngikutin warna & font parent).
Kamu bisa "ngeset ulang" properti yang diwariskan ke nilai awalnya pake nilai initial, atau ke nilai default browser pake unset, atau ke nilai spesifik lain.
Gimana Browser Memutuskan? Ringkasan Alur Cascade
Jadi, kalau ada banyak style yang nargetin satu elemen, browser bakal ngelewatin proses ini buat mutusin mana yang dipake:
Kumpulin semua deklarasi CSS yang relevan buat elemen itu dari semua sumber (browser, author, user).
Sortir berdasarkan asal (origin) dan !important. Deklarasi dengan !important dari User lebih kuat dari !important dari Author, yang lebih kuat dari deklarasi normal Author, yang lebih kuat dari deklarasi normal User, yang lebih kuat dari default Browser. (Aturan !important ini agak rumit, tapi intinya !important itu kuat).
Kalau masih ada konflik di level asal yang sama, hitung Spesifisitas Selektor. Yang skornya paling tinggi menang.
Kalau spesifisitasnya masih sama juga, pake aturan yang Urutannya Paling Akhir di Kode (Source Order).
Terakhir, kalau gak ada style dari Author atau User, baru pake Nilai yang Diwariskan (Inherited) dari parent (kalau propertinya bisa diwariskan).
Kalau gak ada juga (misal, properti gak bisa diwariskan dan gak diset), pake Nilai Default Awal (Initial Value) properti itu.
Pusing? Wajar kalau awal-awal. Tapi, dengan sering latihan dan pake Browser DevTools buat "ngintip" style mana yang aktif dan kenapa, lama-lama kamu bakal ngerti alur mainnya.
Tips Pake Browser DevTools buat Ngertiin Cascade & Spesifisitas:
Klik kanan elemen di halaman web > Inspect atau Inspect Element.
Di panel Styles (atau Computed), kamu bisa liat semua aturan CSS yang ngefek ke elemen itu.
Aturan yang "dicoret" itu artinya dia kalah sama aturan lain yang lebih kuat (karena spesifisitas atau urutan).
Panel Computed juga nampilin nilai final yang dipake dan dari mana nilai itu berasal (diwariskan atau diset langsung). Ini berguna banget!
Memahami The Cascade, Spesifisitas, dan Inheritance ini adalah fondasi penting buat jadi jagoan CSS. Ini ngebantu kamu nulis CSS yang lebih prediktabel, gampang di-debug, dan ngindarin perang !important yang gak perlu.
Jangan khawatir kalau belum 100% ngerti sekarang. Terus aja praktik, dan pelan-pelan konsep ini bakal makin "klik".
Checkpoint KuisTarget: 70%
Kuis Spesifisitas, Inheritance, & Cascade CSS
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
